Добавление родительских селекторов в SCSS

#sass

Вопрос:

Я хочу вложить селекторы, добавив родительский селектор в SCSS.

Основной селектор:

 .selector-class .selector-class__element {}

Вот HTML:

 <div class="selector-class">
    <div class="selector-class__element"></div>
</div>

(A) Вот желаемый результат в SCSS:

 .selector-class {
    .selector-class__element {

    }
}

(B) Это идея, лежащая в основе того, как я хочу это сделать: (Не работает)

 .selector-class {
    amp;__element {

    }
}

Есть ли более эффективный способ сделать это, чем использование метода в (A) ?

Ответ №1:

Вам просто нужно добавить дополнительный амперсанд в начале:

 .selector-class {
    amp; amp;__element {
      background: red;
    }
}

1. Это выдает синтаксическую ошибку: "Syntax error: Invalid CSS after " amp; amp;": expected "{"

2. Sass 3.3.8 (Maptastic Maple)

3. Вы также используете Compass? Текущая стабильная версия (0.12) несовместима с Sass 3.3

4. О боже, тогда это будет проблемой. Мне нужно обновить Ruby 2.1 на Mavericks, чтобы Compass 1 работал. Потребуется некоторое время, надеюсь, это исправит.

5. Хорошо, теперь это работает с SASS: 3.3.8 и Compass: 1.0.0.alpha.19

Ответ №2:

Вам нужно попробовать это. Это всего лишь пример как для класса, так и для элемента. Вы можете попробовать любой из них.

 .selector-class {
   amp;.class, amp;div { background: blue; }
}

Редактировать
Ниже приведен метод интерполяции для объединения строк.

 .selector-class {
   amp;#{'__element'} { background: blue; }
}

CSS

 .selector-class .selector-class__element { background: blue; }

подробнее об интерполяции

интерполяция

1. Весь смысл в том, чтобы избежать повторной записи всего amp;.class .

2. Вы можете избежать amp;.class и перейти к amp;#{‘__element’} . Помогает ли это?

3. Я не уверен, что вы подразумеваете под amp;#{‘__element’}

4. Я только что обновил. Это метод интерполяции sass. Это помогает подключить строку.

5. Хм, интересно, спасибо за ссылку. По какой-то причине интерполяция не работает с селектором амперсандов!