html

@extend and Inheritance in Sass | Explained

Writing a clean and readable CSS code that does not repeat redundant values is absolutely possible using Syntactically Awesome Stylesheet (Sass). While styling elements on a web page we often come across a situation where elements are styled in a similar fashion only differing in minor details. Writing a stylesheet for such elements could prove very hectic because the amount of redundant values would be enormous. To avoid such situations Sass provides the @extend rule. This post discusses this rule in detail.

Sass @extend rule and Inheritance

When your elements are styled in a similar fashion only differing in minor details then you would want to inherit similar properties of one element to another. This is possible using the @extend rule which allows you to inherit properties used for one selector to another.

Let’s try and understand this rule and how it helps in inheriting similar CSS properties with the help of an example.

Example

In the example below, we are assuming that there are multiple messages that appear on our website such as error message, warning message, success message, etc. For the purpose of styling these elements we are first defining a class .message-standard that contains all the properties that are redundant for all the sorts of messages appearing on our website.

Sass

.message-standard {
  padding: 5px;
  border: 2px solid gray;
  text-align: center;
  color: white;
}

Now this is the basic style that all of the messages will have no matter what their type is. Now when it comes to styling these messages separately you can inherit these properties from the .message-standard class along with writing other styling properties for each type of message.

Sass

.message-error {
  @extend .message-standard;
  background-color: blue;
}
.message-warning {
  @extend .message-standard;
  background-color: red;
}
.message-success {
  @extend .message-standard;
  background-color: green;
}

Now you can notice that in the above code snippet we have used the @extend rule to inherit the properties from the .message-standard class to style each type of message meanwhile, giving each of them a different background color. This can save a lot of time and energy and the number of lines of code reduces.

The resultant CSS output file will look like this.

.message-standard, .message-error, .message-warning, .message-success {
  padding: 5px;
  border: 2px solid gray;
  text-align: center;
  color: white;
}
.message-error {
  background-color: blue;
}
.message-warning {
  background-color: red;
}
.message-success {
  background-color: green;
}

When referring to these classes in your HTML code, there is no need to refer to multiple classes, you can just use the classes assigned to each of the messages. For instance, do not use this <p class=message-standard message-error>, just simply use this <p class=message-error>.

Conclusion

The @extend rule in Sass allows you to inherit similar properties when your elements are styled in a similar fashion only differing in minor details. You can define the basic style of such elements in one class and then inherit that class using the @extend rule in other classes along with additional styling for that particular element. Using this rule can save a lot of time and reduce the lines of code thus making your code clean.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.