Extension and Operators in SASS

Quick answer: Extension and operators in SASS give you two ways to reuse and manipulate values. The extend directive makes one selector share the styles of another, so shared rules live in one place. Operators such as addition, subtraction, multiplication, and division work on numbers, and SASS can also concatenate and compare values.

Extension and Operators in SASS. Learn and implement Extension and operators in SASS.

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 extending 

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.

Frequently asked questions