YouTipSass Extend
# Sass @extend and Inheritance
The @extend directive tells Sass that the styles of one selector should inherit from another selector.
If one style is almost identical to another, with only minor differences, using @extend is very useful.
In the following Sass example, we created a basic button style .button-basic, and then defined two button styles .button-report and .button-submit, both of which inherit from .button-basic. The main differences are the background color and font color, while all other styles are the same.
## Sass Code:
.button-basic {
border:none;
padding:15px 30px;
text-align:center;
font-size:16px;
cursor:pointer;
}
.button-report {
@extend .button-basic;
background-color:red;
}
.button-submit {
@extend .button-basic;
background-color:green;
color:white;
}
Convert the above code to CSS code, as follows:
## Css CodeοΌ
.button-basic,.button-report,.button-submit{
border:none;
padding:15px 30px;
text-align:center;
font-size:16px;
cursor:pointer;
}
.button-report{
background-color:red;
}
.button-submit{
background-color:green;
color:white;
}
After using @extend, in HTML button tags we don't need to specify multiple classes like class="button-basic button-report", we just need to set class="button-report".
@extend well reflects the reuse of code.