SASS tem um recurso chamado @extend
que permite a um seletor herdar as propriedades de outro seletor, mas sem copiar as propriedades (como mixins).
O LESS também tem esse recurso?
SASS tem um recurso chamado @extend
que permite a um seletor herdar as propriedades de outro seletor, mas sem copiar as propriedades (como mixins).
O LESS também tem esse recurso?
Respostas:
Sim, Less.js introduzido extend
na v1.4.0 .
:extend()
Em vez de implementar a @extend
sintaxe at-rule ( ) usada por SASS e Stylus, o LESS implementou a sintaxe de pseudo-classe, que dá à implementação do LESS a flexibilidade de ser aplicada diretamente a um seletor em si ou dentro de uma instrução. Portanto, ambos funcionarão:
.sidenav:extend(.nav) {...}
ou
.sidenav {
&:extend(.nav);
...
}
Além disso, você também pode usar a all
diretiva para estender classes "aninhadas":
.sidenav:extend(.nav all){};
E você pode adicionar uma lista separada por vírgulas de classes que deseja estender:
.global-nav {
&:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
height: 70px;
}
Ao estender os seletores aninhados, você deve notar as diferenças:
seletores aninhados .selector1
e selector2
:
.selector1 {
property1: a;
.selector2 {
property2: b;
}
}
Agora .selector3:extend(.selector1 .selector2){};
produz:
.selector1 {
property1: a;
}
.selector1 .selector2,
.selector3 {
property2: b;
}
, .selector3:extend(.selector1 all){};
saídas:
.selector1,
.selector3 {
property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
property2: b;
}
, .selector3:extend(.selector2){};
saídas
.selector1 {
property1: a;
}
.selector1 .selector2 {
property2: b;
}
e finalmente .selector3:extend(.selector2 all){};
:
.selector1 {
property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
property2: b;
}
@extend
sintaxe at-rule ( ) implementada pelo SASS e Stylus, que normalmente é reservada para fornecer instruções ou diretivas ao analisador CSS no navegador." <- o que diabos isso quer dizer? Cheira a falar de marketing.
.sibling-1 {
color: red
}
.sibling-2 {
background-color: #fff;
.sibling-1();
}
Resultado
.sibling-1 {
color: red
}
.sibling-2 {
background-color: #fff;
color: red
}