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

Як зробити посилання на селектор типу перед батьківським селектором, коли він є частиною того самого елемента?

Як зазначає Кумар , це стало можливим з часів Сасса 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 для отримання більш докладної інформації