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;
}
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.
The Hexlet support team or other students will answer you.
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.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
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.