What is the @extend directive in SASS?

SASS allows developers to write more readable code and manipulate it in better ways. It contains multiple directives such as @media, @content, @include, @mixin, @extend, etc. that provide features so that developers can write better code than normal CSS.

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

For example, if your application's fonts have a common CSS and a different font size is required everywhere, you can extend the font style and add a custom font size. This eliminates the need to write duplicate code.

Additionally, developers can implement inheritance in CSS using the @extend directive, which we will learn through examples.

grammar

Users can use the @extend directive in SASS according to the following syntax.

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 "Another_CSS_Selector" and add our own code.

Example 1 (Basic use of @extend directive)

In the example below, we define some styles for an HTML element with the "card" class name. After that, we define CSS for the "small_card" and "large_Card" elements. We used the @extend directive in both selectors to extend the CSS of the "card" selector. Additionally, we've included some additional CSS like width, height, etc. in the "small_card" and "large_card" selectors.

.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 output below, we can observe that the style of the "card" selector is applied to the "small_card" and "large_card" selectors. Additional CSS is also applied to 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 following example, we demonstrate how to use the @extend directive to create an inheritance chain. Here we’ve added some CSS inside the “.first” selector. After that, we extended the ".first" selector inside the ".second" selector and added some extra CSS.

Next, we expand the ".second" selector inside the ".third" selector and the ".third" selector inside the ".fourth" selector. So here we have created an inheritance chain using 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 the CSS code is applied to different CSS selectors when we use the @extend directive to create an inheritance chain.

.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 inheritance using @extend directive)

In this example, we demonstrate how to use multiple inheritance using the @extend directive. Multiple inheritance means that a single selector extends multiple selectors.

Here, we defined the ".container" and ".main" CSS selectors and added some CSS. After that, inside the ".element" CSS selector, we extend 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 within @media directive)

In the example below, we use the @extend directive inside the @media directive. However, the SASS compiler throws an error whenever we extend a CSS selector that is defined outside of the @media directive within the @media directive's selector.

Here, we extend the ".small_button" CSS selector with the ".button" CSS selector in the @media directive. Users can observe that both selectors here are located within 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 Selector)

As the name suggests, we can create a placeholder selector by adding the (%) symbol before the selector name. When we compile SASS code, the placeholder selector will not appear in the output code, but its style will be added in place of expansion.

For example, we define the "%container" placeholder selector here. After that, we extended the container selectors inside "small_container" and "medium_container".

In the output, we can observe that it does not 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 how to use the @extend directive in this tutorial. Basically, we can use it to extend stylesheets and avoid duplication of code. Additionally, we can create inheritance chains in CSS using the @extend directive.

The above is the detailed content of What is the @extend directive in SASS?. For more information, please follow other related articles on the PHP Chinese website!