SASS @extend At-rule - SASS Inheritance

SASS @extend at-rule allows Inheritance of styling rules in your stylesheet. If you wish to define a class in your stylesheet with all the styling rules of another class along with its own specific styling rules, we can use the SASS @extend at-rule.

SASS @extend at-rule will let you use the CSS properties of one selector in the other.

SASS @extend: Syntax

To use @extend at-rule, we should follow the following syntax:

@extend <selector>

Let's take a simple SASS example and try to understand its usage.

Let's write some styling rules for the error, warning and success messages. The class written below .message-shared holds the basic styling rules and then the .message, .success, .error and .warning

.message-shared 
{
	border: 1px solid #ccc
	padding: 10px
	color: #333
}

Now let's extend this to the other classes.

.message 
{
	@extend .message-shared
}
.success 
{
	@extend .message-shared
	border-color: green
}
.error 
{
	@extend .message-shared
	border-color: red
}
.warning 
{
	@extend .message-shared
	border-color: yellow
}

SASS @extend and Placeholder Selector

A placeholder selector is defined with its name preceded by a % sign. When we define a placeholder selector, we cannot use this in our HTML but it can only be used for inheritance, which means other selectors can inherit its styling using the @extend at-rule.

Let's take a simple example:

%btn 
{
	border: 1px solid #ccc
	padding: 10px
	color: #333
}
.btn-success 
{
	@extend %btn
    background-color: green
}
.btn-error 
{
	@extend %btn
	background-color: red
}

The compiled CSS code will look like,

.btn-success 
{
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
    background-color: green;
}
.btn-error 
{
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
	background-color: red;
}

As you can see that in the compiled CSS, we do not have the placeholder selector, only its styling rules in the styling classes which have extended it.

SASS Private Placeholder:

We can even define private placeholder in SASS by adding a - hyphen or an underscore _ as prefix to the name of the selector. Such placeholder selectors become private and can only be extended by styling classes written within the same stylesheet.

SASS @extend: Optional Extend

If you use the @extend at-rule to extend any selector and if it doesn't exist in the stylesheet then SASS will give error. So you should be careful while using the @extend at-rule, because if you change the name of the selector being extended, then it can lead to error.

To deal with this, if you want that your stylesheet code doesn't give error, you can use !optional at the end of the @extend statement. This will make the inheritance of style rules optional and if the selector being extended is not available, still SASS will not give error.

SASS @extend vs. @mixin at-rule

SASS mixins are also used to define reusable style in SASS just like SASS extends, so when should we use @mixin at-rule and when should we use @extend at-rule?

The answer to this is, when we want to configure the style rules using arguments, in that case we should use SASS mixins whereas if our requirement is re-using static style rules(just a chunk of style) then in that case we can use the SASS extends in our stylesheet.