Register to get access to free programming courses with interactive exercises

Template selectors SASS: Fundamentals of Operations

The SASS preprocessor introduces a new type of selector: template selectors. Their name makes it clear that they serve to create style templates that can be applied in different parts of the style sheet.

Let's create a template for the flex container, inside which the elements should be centered on all axes. To create a template selector, we use the % character and assign a unique name.

%flex-element-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

If we try to compile this code, we get an empty .css file. These templates aren't compiled in any way until they get used. It helps to structure the code inside the project well, because now we can even have a whole file with different templates.

To apply these styles to an element, use the @extend. directive. Let's add our template to CSS:

%flex-element-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center {
  @extend %flex-element-center;
}

After compilation, you'll get the following CSS code:

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

As you can see, the @extend directive includes CSS code from another selector. As such, it can be used not only with template selectors, but with any other selectors.

%flex-element-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info {
  color: blue;
  font-weight: bold;
  font-size: 1.5em;
}

.modal-info {
  @extend %flex-element-center;
  @extend .info;
  background: #fff;
  border: 3px solid blue;
}

In this code, we plug the %flex-element-center template into the .modal-info, class, and inherit the styles from the .info class. The final result of the compilation is the following CSS code:

.modal-info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info, .modal-info {
  color: blue;
  font-weight: bold;
  font-size: 1.5em;
}

.modal-info {
  background: #fff;
  border: 3px solid blue;
}

Note the resulting order of the selectors. And also that the .modal-info is duplicated in the generated CSS code. This is a feature of the @extend directive. By default, SASS doesn't know how to merge the same selectors. But you don't have to worry about that. There's nothing wrong with this compilation, so you can use the @extend directive and pattern selectors.

As with nesting selectors, the number of inclusion levels with the @extend directive is unlimited. That doesn't mean you should include styles from the selector, which includes styles, which includes styles, which includes styles, which includes styles…... SASS won't stop you from doing it, but future you will hate you for it. Figuring out such a mess of inclusions is sometimes more difficult than simply rewriting the code.

.color {
  color: blue;

  &-white {
    color: white;
  }
}

.badge {
  @extend .color;
  background: white;

  &.info {
    background: blue;
    @extend .color-white;
  }
}

.badge-modal {
  @extend .badge;
  position: absolute;
}

This miracle code is compiled into the following CSS:

.color, .badge, .badge-modal {
  color: blue;
}
.color-white, .badge.info, .info.badge-modal {
  color: white;
}

.badge, .badge-modal {
  background: white;
}
.badge.info, .info.badge-modal {
  background: blue;
}

.badge-modal {
  position: absolute;
}

Additional assignment

Take the last code in this tutorial and figure out why these selectors were created, and what order they're in. Go from line to line. You can also copy it and experiment.


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.