Menos 1.4 adiciona herança na forma de @extend. Semelhante a um @mixin,
mas mais eficiente em sua saída. Um mixin irá produzir o mesmo pedaço
de código toda vez que for usado, mas estender os grupos de seus seletores
.
.btn {
color: red;
background: green;
border: 1px solid red;
span {
background: url('smile.png') no-repeat;
}
}
.go-btn {
&:extend(.btn);
color: green;
}
compila para:
.btn,
.go-btn {
color: red;
background: green;
border: 1px solid red;
}
.btn span {
background: url('smile.png') no-repeat;
}
.go-btn {
color: green;
}
Transmitir all
estende elementos aninhados
.btn {
color: red;
background: green;
border: 1px solid red;
span {
background: url('smile.png') no-repeat;
}
}
.go-btn {
&:extend(.btn all);
color: green;
}
Compila para:
.btn,
.go-btn {
color: red;
background: green;
border: 1px solid red;
}
.btn span,
.go-btn span {
background: url('smile.png') no-repeat;
}
.go-btn {
color: green;
}