What is a @extend directive in SASS?

The SASS allows developers to write more readable code and manipulate it in a better way. It contains multiple directives such as @media, @content, @include, @mixin, @extend, etc., providing some functionality so developers can write better code than normal CSS.

In this tutorial, we will learn about the @directive in SASS. The @extend directive allows developers to extend the CSS code. However, mixins also extend the CSS code and avoid repetition. The @extend directive also allows us to avoid the repetitions of the code.

For example, if you have a common CSS for the application's fonts and need different font sizes in every place, you can extend the font styles and add custom font sizes. In this way, you don’t need to write repetitive code.

Furthermore, developers can achieve inheritance in CSS using the @extend directive, which we will learn by examples.

Syntax

Users can follow the syntax below to use the @extend directive in SASS.

selector {
   /* CSS code */
}
Another_CSS_selector {
   @extend selector;
   /* CSS code */
}

In the above syntax, we can write common CSS in the declaration block of the ‘selector’. After that, we can extend the selector inside the ‘Another_CSS_Selector’ and add its own code.

Example 1 (Basic use of @extend directive)

In the example below, we have defined some styles for the HTML element with the ‘card’ class name. After that, we have defined CSS for the ‘small_card’ and ‘large_Card’ elements. We have used the @extend directive in both selectors to extend the CSS of the ‘card’ selector. Also, we have included some other CSS inside the ‘small_card’ and ‘large_card’ selectors, such as width, height, etc.

.card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   @extend .card;
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   @extend .card;
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

Output

In the below output, we can observe that styles of the ‘card’ selector are applied to the ‘small_card’, and ‘large_card’ selectors. The extra CSS also applied for both selectors separately.

.card,
.small_card,
.large_card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

Example 2 (Inheritance chain using @extend directive)

In the example below, we have demonstrated to create an inheritance chain using the @extend directive. Here, we have added some CSS inside the ‘.first’ selector. After that, we have extended the ‘.first’ selector inside the ‘.second’ selector and added some extra CSS.

Next, we have extended the ‘.second’ selector inside the ‘.third’ selector and the ‘.third’ selector inside the ‘.fourth’ selector. So, here we have created the inheritance chain with different CSS selectors.

.first {
   width: 100px;
   height: auto;
}
.second {
   @extend .first;
   color: blue;
}
.third {
   @extend .second;
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   @extend .third;
   margin: 10px;
   padding: 1rem;
}

Output

The output below shows how CSS code is applied for different CSS selectors when we create an inheritance chain using the @extend directive.

.first,
.second,
.third,
.fourth {
   width: 100px;
   height: auto;
}
.second,
.third,
.fourth {
   color: blue;
}
.third,
.fourth {
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   margin: 10px;
   padding: 1rem;
}

Example 3 (Multiple inheritances using @extend directive)

In this example, we have demonstrated to use the of multiple inheritances using the @extend directive. The meaning of multiple inheritances is single selector has multiple selectors extended.

Here, we have defined the ‘.container’ and ‘.main’ CSS selectors and added some CSS. After that, inside the ‘.element’ CSS selector, we have extended the ‘.container’, and ‘.main’ selectors.

.container {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main{
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   @extend .main;
   @extend .container;
   padding: 2%;
}

Output

.container,
.element {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main,
.element {
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   padding: 2%;
}

Example 4 (Using @extend directive inside the @media directive)

In the example below, we have used the @extend directive inside the @media directive. However, the SASS compiler gives an error whenever we extend the CSS selector, which is defined outside of the @media directive inside the selector of the @media directive.

Here, we have extended the ‘.small_button’ CSS selector with the ‘.button’ CSS selector inside the @media directive. Users can observe that here both selectors are inside the @media directive.

@media small_screen {
   .button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      @extend .button;
      @extend .main;
      height: 25%;
   }
}

Output

@media small_screen {
   .button,
   .small_button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      height: 25%;
   }
}

Example 5 (Placeholder selectors)

As the name suggests, we can create a placeholder selector by adding the (%) sign before the selector name. When we compile the SASS code, the placeholder selector will not appear in the output code, but its style will be added where it is extended.

For example, we have defined the ‘%container’ placeholder selector here. After that, we extended the container selector inside the ‘small_container’ and ‘medium_container’.

In the output, we can observe that it doesn’t contain the ‘container’ selector, but ‘small_container’ and ‘large_container’ contain the ‘container’ placeholder code.

%container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   @extend %container;
   width: 100px;
   height: 100px;
}
.medium_container {
   @extend %container;
   width: 300px;
   height: 300px;
}

Output

.small_container,
.medium_container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   width: 100px;
   height: 100px;
}
.medium_container {
   width: 300px;
   height: 300px;
}

Users learned to use the @extend directive in this tutorial. Basically, we can use it to extend the stylesheet and avoid the repetitions of the code. Also, we can use the @extend directive to create an inheritance chain in CSS.