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 we can apply to different parts of the style sheet.

Let's create a template for the flex container, inside which we should center the elements 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;
}

Trying 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, we can use it 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. It 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. SASS won't stop you from doing it, but a future version of yourself will hate it. Figuring out such a mess of inclusions is sometimes harder 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 compiles 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 find out the reason why we created these selectors and the order they're in. Go from line to line. You can also copy it and experiment.