Scss перед родительским селектором
У меня есть проект, в котором у устаревшего кода есть такие классы, как
promogame-promo
У меня есть шанс очистить css, изменив его на scss, но проблема, которую я пытаюсь решить, заключается в том, что я хотел бы вложить promo и сделать так, чтобы game- добавлял родительский элемент.
.promo {
display: flex;
game-& {
color: black;
}
}
Мне бы хотелось, чтобы вышеперечисленное работало, но это не так, и мне интересно, встречал ли кто-нибудь способы достижения того, что мне нужно?
@JosephMarikle, который дает мне .game- .promo вместо .game-promo
нет я думаю ты не можешь
Ответы 4
.game-promo {
color: black;
@at-root .promo {
display: flex;
}
}
Кажется, это невозможно, поэтому после повторной перестановки кода я получил это.
Вы не можете делать то, что пытаетесь. «&» Используется для получения текущего селектора, в вашем случае: game-.promo или .game-.promo, если вы добавляете селектор класса, но он не может работать.
В вашем случае вы можете:
.game-promo {
color: black;
.promo {
display: flex;
}
}
Или переименуйте свои классы в название: (я привожу пример с инвертированием логики ваших имён)
- Родитель с ".promo"
- Ребенок с ".промо-игрой"
Итак, вы могли:
.promo {
//properties
&-game {
//properties
}
}
Это возможно, но не очень красиво (код на jsFiddle):
/** see https://gist.github.com/Bamieh/912a6f0b63cbb53f3ad0bd8df7171c6a */
@function parse-dotless($class) {
$this: quote($class);
@return if (str-slice($this, 0, 1) == ".", str-slice($this, 2, str-length($this)), $this);
}
.promo {
color:yellow;
@at-root .game-#{parse-dotless(&)} {
color: blue;
}
}<span class = "promo">Hello</span>
<span class = "game-promo">World</span>Вы не можете делать именно то, что указано в вашем фрагменте, используя только функцию &. Вместо этого вы можете создать такие классы модификаторов:
.btn {
&-primary {}
&-secondary {}
}
Что переводится на:
.btn-primary {}
.btn-secondary {}
В вашем примере кода вы можете инвертировать имена правил:
.promo {
display: flex;
&-game {
color: black;
}
}
Узнать больше о нахальный амперсанд
Вы забыли индикатор класса:
.. Вы пробовали.game-& { ...?