Соединение селекторов в SASS
Иногда нам нужно, чтобы при компиляции вложенных конструкций они соединялись не через пробел, а слитно. Для этого перед именем вложенного селектора необходимо поставить амперсанд:
div {
&.block {
width: 300px;
}
}
В результате после компиляции у нас получится следующий код:
div.block {
width: 300px;
}
Расскажите, каким будет результат компиляции следующего кода:
#block {
&.xxx {
width: 300px;
}
}
Расскажите, каким будет результат компиляции следующего кода:
#block {
.xxx {
width: 300px;
}
}
Расскажите, каким будет результат компиляции следующего кода:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Расскажите, каким будет результат компиляции следующего кода:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Расскажите, каким будет результат компиляции следующего кода:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}