Yogesh Chauhan's Blog

How does @extend rule work in SCSS (Sass)?

in SCSS on May 3, 2021

@extend rule is helpful in inheriting styles from another selector.

Just like this:

SassScript is pretty handy when it comes to inherit the styles from one selector to another. If the same style applied to another element or selector even without a single rule change, you can just extend the rule. You’d want to do that in a case where you want to manage both selectors style parallely and one of them might get a slight style change in future. There are multiple ways to do that but this involves less coding.

As you can see in the example above, all we need to do is @extend [selector’s name].

This is how it compiles into CSS:


.error, .error--serious {
  color: red;
}
.error--serious {
  color: red;
  font-weight: bold;
  font-size: 20px;
}

The elements are styled EXACTLY like they matched the extended selector.

That means if you extend an hover selectors style, it will be used for the hovered state style for that element too. Just like this:

Extend rules are resolved after the stylesheet is compiled completely.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to display modal from bottom to top using CSS and JavaScript?CSSHow to add navigation menu in Angular 9 app?AngularWhat is Conditional Rendering in React?ReactCreate a simple bar chart and column chart using pure CSS gridCSSHow to create a Random Hex Color generator using JavaScript?JavaScriptWordPress: How to get ACF field values from another post?WordPressHow to load a module with configuration in SCSS?SCSSHow to make a Custom Login Page in WordPress?WordPressHow to create a sidebar using pure CSS?CSSVariables scope and shadowing in SCSS (Sass)SCSSCONCAT and CONCAT_WS Functions in PostgresPostgresWordPress: How to loop through ACF group fields?WordPress