Можно ли ссылаться на другого родителя, кроме одного выше?

У меня есть следующий пример кода:

.level1 { // css .level2 { // css . level3 { // css color: red; } } 

А потом

 .level1.blue .level .level3 { color: blue } 

Я хотел бы как-то поставить второе правило на первый бит кода, чтобы я не повторил структуру снова, и у меня есть две возможности цвета выше, возможно ли это в любом случае?

Я не собирался отвечать на свой вопрос, но, похоже, я узнал, что именно я искал, только недавно его добавили в sass, и он будет доступен по 3.4. Я считаю, что есть предварительная проверка, но я еще не пробовал ее.

В основном, на что я смотрел, мне ответили на github:

https://github.com/sass/sass/issues/286#issuecomment-49112243

Итак, вы можете сделать 3.4:

 .level1 { .level2 { .level3 { @at-root #{selector-append(".blue", &)} { color: blue; } color: red; } } } 

что именно я искал.

Есть куча добавлений, связанных с родительским селектором (&), вы можете узнать больше от него по адресу https://github.com/sass/sass/issues/1117

Имейте в виду, что во время написания этого ответа все это довольно новое.

Также см .: https://github.com/sass/sass/blob/master/doc-src/SASS_CHANGELOG.md И: http://www.phase2technology.com/blog/everything-you-need-to-know- о-Сасс-3-4 /

Эта:

 @mixin level3color($color) { .level2 { .level3 { color: $color; } } } .level1 { @include level3color(#FF0000); &.blue { @include level3color(#0000FF); } } 

производит это:

 .level1 .level2 .level3 { color: red; } .level1.blue .level2 .level3 { color: blue; } 

Должен любить миксины!

РЕДАКТИРОВАТЬ:

Это все еще довольно чисто (или, по крайней мере, чисто, учитывая то, что вы пытаетесь сделать), потому что у вас все еще есть ваша структура.

 .level1 { // css .level2 { // css .level3 { // css color: red; } } &.blue { @include level3color(blue); } &.yellow { @include level3color(yellow); } } 

Простой пример:

  .child{ background-color:red; .parent:hover &{ background-color:blue; } } 

переходит в

 .child { background-color: red; } .parent:hover .child { background-color: blue; } 

http://sassmeister.com/gist/e994e056d3cc3b342e2c

  • Sass .scss: Nesting и несколько classов?
  • Объединение вложенных classов с использованием SASS
  • Цветовая переменная Sass не работает внутри darken ()
  • Ложноположительная ошибка «неопределенной переменной» при компиляции SCSS
  • Давайте будем гением компьютера.