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;
   }
}

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

Ответы на вопрос(5)

нно, вам нужно использовать этот синтаксис:

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

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

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

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

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

 santiago arizti11 апр. 2018 г., 00:27
Я только что использовал это, очень полезно для миксинов, где вы хотите, например, изменить поведение элементов span или div
 Vahid17 мая 2019 г., 06:45
@Simon_Weaver смэта ссылка для большего количества примеров&
 Vahid16 мая 2019 г., 11:25
@Simon_Weaver в sass, все внутри#{} оценивается. Также& означает текущий селектор. Так#{&} оценивается в..c1
 Simon_Weaver15 мая 2019 г., 21:51
вау - очень круто :-) так что#{&} в основном обманывает компилятор - или это всегда будет работать в будущем !?
 Simon_Weaver16 мая 2019 г., 19:54
Но ты'перехитрить его в том смысле, что & один нет работа ;-)

Как указывает КумарЭто стало возможным с 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;
}
 jaminroe12 нояб. 2015 г., 04:27
@ Блейн, теперь я понимаю! Сделал некоторые исследования на все это, и это имеет смысл сейчас. Я'Я сделаю это по старинке или использовать@expand, Спасибо!
 Kayhadrin15 сент. 2014 г., 08:03
Это должно быть решением этого вопроса.
 Frank Nocke21 нояб. 2017 г., 18:01
у меня естьнемного более жесткая версия этого решить, похоже, но смножественный классы, которые должны быть добавлены ктег - кто-нибудь?
 Blaine11 нояб. 2015 г., 18:36
@jaminroe ты используешь Libsass? Это будетисправлено в 3.3.
 jaminroe11 нояб. 2015 г., 17:54
Это н'не работает для меня ... выход выходит.item a.item по какой-то причине. Я пытался делатьa#{&} в теме'с собственным тоже и все тот же результат.
 Aleksander02 февр. 2018 г., 18:14
Это не работает для меня, используя теги select и option, см. Следующую скрипку:jsfiddle.net/kdc4qqx1, Кто-нибудь?
 Blaine12 нояб. 2015 г., 01:00
@jaminroe выглядит такс помощью libsass (node-sass) под капотом. Если это'в этом случае тынужно будет подождать до 3.3.
 jaminroe11 нояб. 2015 г., 19:24
@Blaine I 'использую Visual Studio 2013 с Web Essentials. Согласно тому, что япрочитал, это так. Возможно расширение / плагин нужно обновить

@at-root-only метод не решит проблему, если вы собираетесь расширить ближайший селектор вверх по цепочке. В качестве примера:

#id > .

Будет компилировать в:

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;
}
 Ben Fleming09 февр. 2015 г., 23:59
Это сказало,selector-replace это также другой способ сделать это, но он требует знания, что такое селектор.selector-unify метод имеет то преимущество, что его используют в миксинах.
 Ben Fleming09 февр. 2015 г., 23:56
@Blaine You 'Мы обнаружили явную ошибку, спасибо. Я'отредактировал мой ответ с рабочим решением.
 danbrellis07 июн. 2016 г., 17:52
это прекрасно сработало для меня, спасибо!
 Senthe21 дек. 2017 г., 14:13
Потрясающий ответ.
 Blaine09 февр. 2015 г., 19:55
Это недайте мне ожидаемый результат. В Sass 3.4.11 это выводит#id > .element #id > div.element { color: blue; }, Другой подход будет использовать.selector_replace#id { > .element { @at-root #{selector-replace(&,'.element', 'div.element')} { color: blue;}}}Вот'суть для лучшей читаемости.

3.3.0.rc.1(Maptastic Maple)

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

Видеть этоВыпуск Github Больше подробностей

который используетселектор &, Если вы собираетесь сделать что-то подобное, выМне нужно пространство между селектором и амперсандом. Например:

.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.)

 imjared12 февр. 2014 г., 15:04
@ ЛюйЯ согласен, но яЯ не пытаюсь определить лучшие практики для повышения микроэффективности. Я'Я пытаюсь получить кого-то, кто ставитhref пометить наp написать рабочий CSS.
 Mike Mellor03 окт. 2017 г., 16:59
ОП хотел.item { a& { ... } } что теперь можно сделать, как указывает @Blaine с.item { @at-root a#{&} { ... } }, Дело в том, что если у вас есть элемент, его легко сделать.item { &.class { ... } } так почему бы и нетВы сможете сделать то же самое с необработанным HTML-элементом. Просто потому, что не было никакого способа сделать это в то время, когда опубликованная ОП не делаетЯ имею в виду, что он ошибался, желая, чтобы функциональность действительно сделала это
 imjared03 окт. 2017 г., 15:43
@MikeMellor OP написал.item { a& } и там'нет никакого нахального синтаксиса для этого (насколько яЯ в курсе. я предположил, что он, вероятно, искал что-то вроде описанного вами синтаксиса амперсанда, который довольно часто используется в Sass. однако, опираясь на ОП 'пример,.item { &a } не действует и будеткомпилировать в.itema, Как я и сказал в своем ответе. Есть ли что-то, что ям отсутствует?
 Mike Mellor03 окт. 2017 г., 15:33
Theres абсолютно никакой поддержки, чтобы сказать и.selector - плохая практика, существует множество вариантов использования, точно таких же, как тот, который публиковал OP.

Ваш ответ на вопрос