What is the @extend directive in SASS?

SASS allows developers to write code that is more readable and easier to use. It includes many directives, such as @media, @content, @include, @mixin, and @extend, that provide functionality that allows developers to write better code than standard CSS.

In this tutorial, we’ll learn about the @directive in SASS. The @extend directive allows developers to extend CSS code. However, mixins can also extend CSS code and avoid duplication. The @extend directive also allows us to avoid duplication of code.

For example, if you have a common CSS font for your application and need different font sizes everywhere, you can extend the font style and add your custom font size. This way, you don’t need to write duplicate code.

Alternatively, developers can use the @extend directive to implement inheritance in CSS. Here’s what we’ll learn through examples.

Syntax

You can use the @extend directive in SASS using the following syntax.

Selector{
/* CSS code*/
}
Another_CSS_Selector{
@extend selector;
/* CSS code */ 
} 

In the above syntax, we can write common CSS within the declaration block of “selector.” We can then extend the selector within “Another_CSS_Selector” and add our own code.

Example 1 (Basic Usage of the @extend Directive)

In the following example, we define styles for some HTML elements with the “card” class. We then define CSS for the “small_card” and “large_card” elements. We use the @extend directive in both selectors to extend the CSS for the “card” selector. We also include some additional CSS, such as width and height, 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 following output, we can observe that the styles of the “card” selector are applied to both 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 (Creating an inheritance chain using the @extend directive)

In the following example, we demonstrate how to create an inheritance chain using the @extend directive. Here, we added some CSS to the “first” selector. Afterwards, we expanded the “first” selector and added some additional CSS to the “second” selector.

Next, we extend the “second” selector within the “third” selector, and extend the “third” selector within the “fourth” selector. Thus, we create 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 following output shows how the CSS code is applied to different CSS selectors when creating 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 the @extend Directive)

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

Here, we define the “container” and “main” CSS selectors and add some CSS. Then, within 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 the @extend Directive Within the @media Directive)

In the following example, we use the @extend directive within the @media directive. However, whenever we extend a CSS selector defined outside the @media directive within the @media directive’s selector, the SASS compiler will error.

Here, we use the “small_button” CSS selector within the @media directive, which is extended with the “button” CSS selector. As you can see, both selectors are 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 prefixing the selector name with a % symbol. When we compile the SASS code, the placeholder selector will not appear in the output code, but its styles will be added wherever it is extended.

For example, here we define the “%container” placeholder selector. We then extend the container selector in “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; 
} 

In this tutorial, you learned how to use the @extend directive. Essentially, you can use it to extend stylesheets and avoid duplication of code. You can also use the @extend directive to create inheritance chains in CSS.