Блог

Главная - Вопросы по программированию - Какой эквивалент Sass для этого кода LESS, который применяет несколько подклассов CSS?

Какой эквивалент Sass для этого кода LESS, который применяет несколько подклассов CSS?

#css #sass

#css #sass

Вопрос:

Это работает в МЕНЬШЕМ:

 .block {

  amp;--modifer1 {
    background: red;
  }

  amp;--modifier2 {
    background: blue;
  }

  // If block has both modifiers
  amp;--modiferamp;--modifier2 {
    background: orange;
  }

}

И последний селектор становится (как и ожидалось);

 .block--modifer.block--modifier2 {
  background: orange;
}

Можно попробовать здесь:

http://winless.org/online-less-compiler

Но тот же код не работает для Sass, который можно попробовать здесь:

http://www.sassmeister.com/

Вместо этого вы получаете ошибку:

 Invalid CSS after "amp;--modifer": expected "{", was "amp;--modifier2"
"amp;--modifier2" may only be used at the beginning of a compound selector.

Как вы пишете этот простой пример с помощью Sass?

Комментарии:

1. где ваш код sass?

2. Это мой вопрос =)

3. Я думаю, вам нужен микс

4. Вы всегда можете использовать селектор с двойным вложением, с одним для amp;.block--modifier2 в блоке для amp;--modifer

Ответ №1:

Вы можете легко написать его, интерполируя родительский селектор amp; .

 .block {

  amp;--modifer1 {
    background: red;
  }

  amp;--modifier2 {
    background: blue;
  }

  // Just interpolate parent selector
  amp;--modifer#{amp;}--modifier2 {
    background: orange;
  }

}

Который генерирует следующий css

 .block--modifer1 {
  background: red; }

.block--modifier2 {
  background: blue; }

.block--modifer.block--modifier2 {
  background: orange; }

Комментарии:

1. Никаких проблем ! Рад помочь 🙂

Ответ №2:

Вы можете сделать вот так

Демонстрация —http://www.sassmeister.com/gist/d75b6e741a1ec0d58a544abfc72c6ab7

 .block{

  amp;--modifer1 {
    background: red;
  }

  amp;--modifier2 {
    background: blue;
  }

 amp;--modifier {
    @at-root amp;#{amp;}2 {
        color:orange;
    }
}

}

Вывод

 .block--modifer1 {
  background: red;
}
.block--modifier2 {
  background: blue;
}
.block--modifier.block--modifier2 {
  color: orange;
}