Extension and Operators in SASS

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.