16.7    Extend (“@extend”)

In addition to mixins, there’s another way to avoid unnecessary repetitions, namely extends. It often happens with many selectors that they differ only by a few properties. The extends can be used in two different ways. First, I’ll show you how to use @extend to split the CSS features of a selector and override or extend the necessary features in the new selector. In the example, we create the .my-article class selector as the base class for the other two class selectors, .my-article-top and .my-article-std, where we only change or override the color of the base class. Of course, you could also expand the two new classes. The extension is made here via @extends selector name. Any type of selector such as class selector, ID selector, element selector, and so on can be used as selector name.

SCSS File

CSS File

...
.my-article {
  width: 35rem;
  background-color: $color-primary;

.my-article,
.my-article-top,
.my-article-std {
  width: 35rem;

  color: $color-primary-font;
  padding: 0.1em;
  margin-bottom: $spacing-std;
  border-radius: 5px;
  h1 {
  padding-left: 0.5em;
  }
  p {
  background-color: $color-secondary;
  color: $color-secondary-font;
  padding: 2em;
  }
}

.my-article-top {
@extend .my-article;
  background-color: darkslategray;
}

.my-article-std {
@extend .my-article;
  background-color: darkred;
}

  background-color: #5f5f5f;
  color: #fff;
  padding: 0.1em;
  margin-bottom: 1em;
  border-radius: 5px;
}

.my-article h1,
.my-article-top h1,
.my-article-std h1 {
  padding-left: 0.5em;
}

.my-article p,
.my-article-top p,
.my-article-std p {
  background-color: #fff;
  color: #000;
  padding: 2em;
}

.my-article-top {
  background-color: darkslategray;
}

.my-article-std {
  background-color: darkred;
}

SCSS file: /examples/chapter016/16_7/style/style.scss

CSS file: /examples/chapter016/16_7/style/style.css

Table 16.8     The SCSS File and the CSS File after the Preprocessor Run

Especially in an example like this one, you can see very clearly that with the help of @extend, the code in the SCSS document remains very clear, in contrast to the generated code in the CSS document. This is immensely useful in development. In the HTML document, the two classes .my-article-top and .my-article-std are used as follows:

...
    <article class="my-article-top">
        <h1>Article 1</h1>
        <p>Lorem ipsum ...</p>
    </article>
    <article class="my-article-std">
        <h1>Article 2</h1>
        <p>Lorem ipsum ...</p>
    </article>
...

Listing 16.5     /examples/chapter016/16_7/index.html

Because the base class .my-article doesn’t appear at all in this example, we could have done without this selector because it unnecessarily inflates the CSS code. This takes us to the second option of using @extend.

Instead of defining a selector that won’t be used at all and would only serve the extension with @extend, you can also use a placeholder. You introduce such a placeholder with %. Here again is the same example, but now my-article is degraded to a placeholder and no longer appears in the CSS code. This requires only one change in the code.

SCSS File

CSS File

...
%my-article {
  width: 35rem;
  background-color: $color-primary;
  color: $color-primary-font;
  padding: 0.1em;
  margin-bottom: $spacing-std;
  border-radius: 5px;
  h1 {
  padding-left: 0.5em;
  }
  p {
  background-color: $color-secondary;
  color: $color-secondary-font;
  padding: 2em;
  }
}

.my-article-top {
@extend %my-article;
  background-color: darkslategray;
}

.my-article-top,
.my-article-std {
  width: 35rem;
  background-color: #5f5f5f;
  color: #fff;
  padding: 0.1em;
  margin-bottom: 1em;
  border-radius: 5px;
}

.my-article-top h1,
.my-article-std h1 {
  padding-left: 0.5em;
}

.my-article-top p,
.my-article-std p {
  background-color: #fff;
  color: #000;
  padding: 2em;
}

.my-article-std {
@extend %my-article;
  background-color: darkred;
}

.my-article-top {
  background-color: darkslategray;
}

.my-article-std {
  background-color: darkred;
}

SCSS file: /examples/chapter016/16_7/style/style.scss

CSS file: /examples/chapter016/16_7/style/style.css

Table 16.9     The SCSS File and the CSS File after the Preprocessor Run

In contrast to the preceding example, the class selector .my-article no longer appears.

“@mixin or” and “@extend”

Now that you know about two techniques to make code more modular and reusable with mixins and extends, the question is which of the two is the better choice. As for the use in the SCSS file, both are very suitable. However, the CSS code which gets created from it is also likely to be decisive. Especially with mixins, the code gets significantly inflated if there are a lot of repetitions. However, if you want to pass arguments, then you’ll prefer mixins over extends. My recommendation is to use @extend for SCSS code without arguments and to use @mixin for SCSS code with arguments. However, there are many different opinions on this. There are also developers who rely exclusively on mixins. This may also explain why mixins, along with variables, are often mentioned in an introduction to Sass, while the extends aren’t mentioned at all. Again, the following also applies here: There isn’t just one way of doing it. You now know two approaches.