Я использую Sass (.scss) для моего текущего проекта.
Следующий пример:
HTML
<div class="container desc">
<div class="hello">
Hello World
</div>
</div>
SCSS
.container {
background:red;
color:white;
.hello {
padding-left:50px;
}
}
Это прекрасно работает.
Могу ли я обрабатывать несколько классов при использовании вложенных стилей.
В приведенном выше примере я говорю об этом:
CSS
.container.desc {
background:blue;
}
В этом случае все div.container
будет нормально, red
но div.container.desc
будет синим.
Как я могу вкладывать это внутрь container
с помощью Sass?
Ответы:
Вы можете использовать родительскую ссылку селектора
&
, она будет заменена родительской селектором после компиляции:Для вашего примера:
&
Будет полностью решить, так что если ваш родительский селектор вложен сам, вложенность будет решена до замены&
.Эта запись чаще всего используется для записи псевдоэлементов и -классов :
Тем не менее, вы можете разместить его
&
практически в любом понравившемся вам положении * , поэтому возможно следующее:Однако имейте в виду, что это как-то нарушает вашу структуру вложения и, следовательно, может увеличить усилия по поиску определенного правила в вашей таблице стилей.
*: Никакие другие символы кроме пробелов не допускаются перед
&
. Таким образом, вы не можете сделать прямую конкатенациюselector
+&
-#id&
выдаст ошибку.источник
&
при использовании псевдоэлементов и псевдоклассов. Например:&:hover
.&
используется в конце строки, она помещает эту строку в начало остальных классов на всех других уровнях. Вы можете комбинировать элементы, выполнив&.desc
under.container
, что добавит .desc к нему, в результате.container.desc
Если это так, я думаю, вам нужно использовать лучший способ создания имени класса или соглашения имени класса. Например, как вы сказали, вы хотите, чтобы у
.container
класса был другой цвет в зависимости от конкретного использования или внешнего вида. Ты можешь сделать это:SCSS
CSS
источник
.container--desc
и в итоге не получите результатов.Ответ Кристофа идеален. Однако иногда вы можете захотеть пройти больше занятий, чем один. В этом случае вы можете попробовать функции
@at-root
и#{}
css, которые позволят двум корневым классам сидеть рядом друг с другом&
.Это не сработает (из-за
nothing before &
правила):Но это будет (используя
@at-root plus #{&}
):источник