Extend | Sass
Sass Extend
Sass Inheritance
Sass Extend
Inheritance in Sass
extend in Sass
The @extend directive adds CSS rule who calls some other CSS rule.
Take a look at the following example:
.input-fields{
border:1px solid black;
border-radius:5px;
background:smokewhite;
color:black;
padding:10px;
font-size:110%;
}
button{
@extend .input-fileds;
text-align:center;
}
input{
@extend .input-fileds;
text-align:left;
}
select{
@extend .input-fileds;
}
In the above code, the rule .input-fields class defines some propoerties whereas other rules i.e. button, input and select @extend the .input-fields rule. For this reason, the caller rules also included along with the .input-fields rule.
Generating following file:
.input-fields, select, input, button {
border: 1px solid black;
border-radius: 5px;
background: smokewhite;
color: black;
padding: 10px;
font-size: 110%;
}
button {
text-align: center;
}
input {
text-align: left;
}