Sass, объединяющий родителя с использованием амперсанда (&) с базовым элементом

У меня возникают проблемы с гнездом в Сасс. Скажем, у меня есть следующий 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;
   }
}

Как связать базовый элемент перед родительским селектором, когда он является частью одного и того же элемента?

Ответы

Ответ 1

Как указывает Кумар, это было возможно, так как 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;
}

Ответ 2

Метод @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;
}

Ответ 3

Для начала (во время написания этого ответа) нет синтаксиса 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.)

Ответ 4

Эта функция приземлилась в новейшей версии Sass, 3.3.0.rc.1 (Maptastic Maple)

Двумя тесно связанными функциями, которые вам понадобятся, являются скриптовые &, которые вы можете интерполировать внутри вложенных стилей для ссылки на родительские элементы и директиву @at-root, которая помещает сразу следующий селектор или блок css в корне (у него не будет родителей в выпуске css)

Подробнее см. Github для более подробной информации