The common properties case
Sometimes you find yourself writing the same set of properties across different CSS rules.
For example, let’s say your design makes use of small spaced uppercase letters throughout the page: buttons, navigation bar, sidebar headings, tabs…
Something like this:
Small spaced uppercase letters
How would that look like in your CSS? You could:
- use a common CSS class like
- combine the selectors
- use a Sass extend
Common CSS Class
.small-uppercase CSS rule is semantically incorrect because you’d end up writing your HTML as
<p class="small-uppercase"> which reverts to basically writing styles within your HTML.
Combine the selectors
Because a CSS rule can accept any number of selectors, you could combine the shared properties under a list of selectors:
This approach remains semantically valid because each selector describes the HTML element they’re attached to.
However, there are 2 problems:
- this CSS rule can become unmanagable as soon as the list of selectors becomes longer
- because each selector has specific rules of their own, you’re separating your set of properties in two (the
.buttoncan have additional rules further down the CSS)
Sass helps solving these problems.
Sass @extend syntax
@extend allows to inherit CSS properties from another selector:
@extend will regroup common properties under a list of selectors.
The list is easily maintainable because you only add selectors one by one, and directly in the related selector.
Your HTML remains semantic because each element keeps its descriptive class name.
Difference with mixins
Well, you might be thinking “Wait, isn’t it just like mixins then?”?
There are 2 differences:
@extendrule doesn’t have parameters. Mixins do.
@extendrule does combine selectors. Mixins don’t.
Let’s reuse our overlay mixin, and also write a
The list of properties is simply repeated as many times as the
@include small-uppercase() is called.
@extend is more efficient, as it only writes the common properties once.
Well, you might be thinking “The
.small-uppercase isn’t semantic! I could use it in my HTML!”?
You’re right, and that’s why placeholders exist in Sass.
If you don’t want or need the
.small-uppercase selector, transform it into a Sass placeholder by replacing the dot with a percentage sign
Note that the generated CSS doesn’t include the
.small-uppercase selector anymore. That’s because the
%small-uppercase rule is only here to provide a location for common properties.
Difference between extend, placeholders and mixins
|Definition||Referencing||Combines selectors?||Allows parameters?||Can be used on its own?|
When in doubt, use mixins. They generate more CSS lines and are less elegant than extend/placeholders, but they are straightforward.