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.

---

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

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“