Extension and Operators in SASS / SCSS

Extend and Operators in SASS / SCSS

The extension is a feature in SASS / SCSS through which we can apply styles of one class to another just by calling the @extend in the subsequent class. Here’s the following example in which we have explained the classic use case of extend

Create a class with the name paragraph1

.paragraph1{
 color: red;
 background: white; 
 &:hover{
 color: pink;
 }
}

Create another class with the name paragraph2 and inside it call the paragraph1 style with @extend function.

.paragraph2{
 @extend .paragraph1;
 &:hover{
 color: yellow;
 }
}

Operators in SASS / SCSS is similar to CSS operators. There are operator functions such as addition, subtraction, multiplication and division.

How operators are used in CSS:

.paragraph1{
 width: calc(80% — 40%);
}

How operators are used in SASS / SCSS:

.paragraph1 {
 width: 80% — 40%;
}

There is no need to use the calc function.

The basics of SASS / SCSS is over with the extend and operators. You can explore more with the learning in your projects. Subscribe on our website for more books and articles related to HTML, CSS, JavaScript, TypeScript, Data Analytics, Data Science, Angular, PHP, MySQL and more.