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.


amazon

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 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
How to overwrite file contents with new content in PHP?PHPHow to use HTML picture Tag?HTML10 Usability Blunders to AvoidUI/UXLearn to make a responsive gallery using CSS Grid and without media queriesCSS12 URLSearchParams methods in JavaScriptJavaScriptHow to change the style for checked radio button or checkboxes using CSS?CSSHow to select an element using its ID without the high specificity of the ID selector?CSSIN and BETWEEN Operators in SQLSQL/MySQLHow to create a placeholder loader (throbber) using CSS?CSSHow can one check to see if a remote file exists using PHP?PHP5 Steps to Create a Line using Canvas Tag in HTML5HTMLQuery to increment or decrement value in MySQL ignoring negative valuesSQL/MySQL