Вложенные правила CSS

Некоторое время назад я увидел пример css файла, где css-правила/селекторы, которые указаны вложенным образом, например. что-то вроде этого:

div.a {
  color: red;
  div.b {
    font-weight: bold;
  }
}

Я не уверен, где я увидел это (возможно, в вопросе SO), или это было точно так, как показано выше.

Мои вопросы: Правильно ли это указано в CSS? Является ли это стандартным способом указания правил CSS или это зависящий от браузера хак?

Ответы

Ответ 1

Это недопустимый стандартный CSS, но это пример объявления классов вложенности с помощью Sass/SCSS или LESS, и я верю в другие расширения CSS, которые расширяют его до чего-то вроде этого (который является допустимым CSS), прежде чем отсылать его в браузер:

div.a {
  color: red;
}

div.a div.b {
  /* Inherits color from div.a */
  font-weight: bold;
}

Ответ 2

То, что вы, вероятно, имеете в виду, это LESS.

Приведенный пример недействителен CSS, но действителен с LESS. LESS будет "скомпилировать" вложенный CSS и преобразовать его в то, что является допустимым CSS.

Ответ 3

Вы можете ввести правила с помощью SASS, http://sass-lang.com/

Возможно, это было?