Compass output_style

Кто-нибудь нашел какую-либо документацию о том, что означают разные значения для output_style в Compass? Возможные варианты: расширенный,: вложенный,: компактный и сжатый. Я вижу, что последнее, но что делают другие?

Кажется, что я потратил немного времени, чтобы перекомпилировать все мои CSS, чтобы выяснить, что эти разные варианты.

ОТВЕТЫ

Ответ 1

Стили вывода описаны в документации SASS.

Хотя стиль CSS по умолчанию, который выводит Sass, очень приятен и отражает структуру документа, вкусы и потребности меняются и поэтому Sass поддерживает несколько других стилей.

Sass позволяет выбирать между четырьмя различными стилями вывода установив опцию: style или используя флаг командной строки -style.

: вложенными

Вложенный стиль - это стиль по умолчанию Sass, поскольку он отражает структура стилей CSS и стиль оформления документов HTML. Каждое свойство имеет свою собственную строку, но отступ не является постоянным. Каждое правило имеет отступ, основанный на том, насколько глубоко он вложен. Например:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

Вложенный стиль очень полезен при просмотре больших файлов CSS: он позволяет вам легко понять структуру файла без фактического чтения что-нибудь.

: расширенная

Expanded - более типичный стиль CSS, созданный человеком, с каждым свойством и правило занимает одну строку. Свойства отступы в пределах правил, но правила arent отступом каким-либо особым образом. Например:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

: компактный

Компактный стиль занимает меньше места, чем Nested или Expanded. Это также больше фокусирует внимание на селекторах, чем на их свойствах. каждый Правило CSS занимает только одну строку, причем каждое свойство, определенное на этом линия. Вложенные правила помещаются рядом друг с другом без новой строки, в то время как отдельные группы правил имеют новые линии между ними. Для Пример:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

: сжатый

Сжатый стиль занимает минимальное пространство, возможно, нет пробелов, за исключением необходимости разделения селекторов и newline в конце файла. Он также включает некоторые другие незначительные сжатия, такие как выбор наименьшего представления для цветов. Он не предназначен для чтения человеком. Например:

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Ответ 2

А я получаю это сейчас..: expand по умолчанию:

: расширенная

#date .day {
  display: block;
  padding-top: 5px;
  font-size: 30px;
  color: #AAA;
}

: вложенными

#date .day {
  display: block;
  padding-top: 5px;
  font-size: 30px;
  color: #AAA; }

: компактный

#date .day { display: block; padding-top: 5px; font-size: 30px; color: #AAA; }

: сжатый

#date .day{display:block;padding-top:5px;font-size:30px;color:#AAA}