YogeshChauhan . com

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

2 Ways we can create an Array in JavaScriptJavaScriptWhat is the difference between float and double?MiscNew to ┬áDrupal? Here’s What You Need to KnowDrupalHow to create bouncing balls using HTML canvas and JavaScript?HTMLHow can one check to see if a remote file exists using PHP?PHPJavaScript String Properties and MethodsJavaScriptShort-Circuit Evaluation in JavaScriptJavaScriptImplicit and Explicit Joins in Oracle SQLSQL/MySQLMySQL queries to get data rows from previous month as well as from last 30 daysSQL/MySQLJavaScript: Methods for HTML DOM classList PropertyJavaScriptHow to find the HCF or GCD and LCM of two given numbers using Swift?SwiftWhat is Conditional Rendering in React?React