Combinação de seletores em SASS
Às vezes, precisamos que, durante a compilação de estruturas aninhadas, elas sejam combinadas de forma concatenada, e não com um espaço. Para isso, é necessário colocar um e comercial antes do nome do seletor aninhado:
div {
&.block {
width: 300px;
}
}
Como resultado, após a compilação, obteremos o seguinte código:
div.block {
width: 300px;
}
Explique qual será o resultado da compilação do seguinte código:
#block {
&.xxx {
width: 300px;
}
}
Explique qual será o resultado da compilação do seguinte código:
#block {
.xxx {
width: 300px;
}
}
Explique qual será o resultado da compilação do seguinte código:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Explique qual será o resultado da compilação do seguinte código:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Explique qual será o resultado da compilação do seguinte código:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
