У меня возникают проблемы с гнездом в Сасс. Скажем, у меня есть следующий HTML:
<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>
Когда я пытаюсь вложить свои стили в следующее, я получаю компиляционную ошибку:
.item {
color: black;
a& {
color:blue;
}
}
Как связать базовый элемент перед родительским селектором, когда он является частью одного и того же элемента?
Как указывает Кумар, это было возможно, так как Sass 3.3.0.rc.1 (Maptastic Maple).
Директива @at-root вызывает исключение одного или нескольких правил в корневом каталоге документа, а не вложенных под родительскими селекторами.
Мы можем объединить директиву @at-root вместе с интерполяция #{}, чтобы достичь намеченного результата.
SASS
.item {
color: black;
@at-root {
a#{&} {
color:blue;
}
}
}
// Can also be written like this.
.item {
color: black;
@at-root a#{&} {
color:blue;
}
}
Вывод CSS
.item {
color: black;
}
a.item {
color: blue;
}
Метод @at-root -only не решит проблему, если вы намерены расширить ближайший селектор вверх по цепочке. В качестве примера:
#id > .element {
@at-root div#{&} {
color: blue;
}
}
Скомпилирует для:
div#id > .element {
color: blue;
}
Что делать, если вам нужно присоединить свой тег к .element вместо #id?
Там функция в Sass называется selector-unify(), которая решает это. Используя это с @at-root, можно настроить таргетинг на .element.
#id > .element {
@at-root #{selector-unify(&, div)} {
color: blue;
}
}
Скомпилирует для:
#id > div.element {
color: blue;
}
Для начала (во время написания этого ответа) нет синтаксиса sass, который использует селектор &. Если вы собираетесь делать что-то подобное, вам понадобится пространство между селектором и амперсандом. Например:
.item {
.helper & {
}
}
// compiles to:
.helper .item {
}
Другой способ использования амперсанда - это, вероятно, то, что вы (неправильно) ищете:
.item {
&.helper {
}
}
// compiles to:
.item.helper {
}
Это позволяет вам расширять селектор с помощью других классов, идентификаторов, псевдоселекторов и т.д. К сожалению, для вашего случая это теоретически скомпилировалось бы с чем-то вроде .itema, который, очевидно, не работает.
Вы можете просто переосмыслить, как вы пишете свой CSS. Есть ли родительский элемент, который вы могли бы использовать?
<div class="item">
<p>text</p>
<p>text</p>
<a href="#">a link</a>
</div>
Таким образом, вы можете легко написать свой SASS следующим образом:
.item {
p {
// paragraph styles here
}
a {
// anchor styles here
}
}
(Боковое примечание: вы должны взглянуть на свой html. Вы смешиваете одиночные и двойные кавычки и помещаете атрибуты href в теги p.)
Эта функция приземлилась в новейшей версии Sass, 3.3.0.rc.1 (Maptastic Maple)
Двумя тесно связанными функциями, которые вам понадобятся, являются скриптовые &, которые вы можете интерполировать внутри вложенных стилей для ссылки на родительские элементы и директиву @at-root, которая помещает сразу следующий селектор или блок css в корне (у него не будет родителей в выпуске css)
Подробнее см. Github для более подробной информации