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

У меня проблемы с вложением в 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;
   }
}

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

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

AFAIK Если вы хотите объединить амперсанд для класса и тегов одновременно, вам необходимо использовать этот синтаксис:

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

будет компилироваться в

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

Другое использование (например, использование класса до @at-rootили использование нескольких @at-roots) приведет к ошибкам.

Надеюсь, это будет полезно

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

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

См. Эту проблему Github для получения более подробной информации.