Учебники

Sass — Стиль вывода

Январь 26, 2019

В этой главе мы рассмотрим стиль вывода SASS . Файл CSS, который генерирует SASS, состоит из стиля CSS по умолчанию, который отражает структуру документа. Стиль CSS по умолчанию хорош, но может не подходить для всех ситуаций; с другой стороны, SASS поддерживает множество других стилей.

Он поддерживает следующие разные стили вывода —

: вложенная

Вложенный стиль является стилем SASS по умолчанию. Этот способ стилизации очень полезен, когда вы имеете дело с большими файлами CSS. Это делает структуру файла более читабельной и легко понятной. Каждое свойство занимает свою собственную строку, а отступ каждого правила зависит от того, насколько глубоко оно вложено.

Например, мы можем вложить код в файл SASS, как показано ниже — 

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

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

В расширенном типе стилей CSS у каждого свойства и правила есть своя строка. Он занимает больше места по сравнению со стилем Nested CSS. Раздел Правила состоит из свойств, которые все предназначены для правил, тогда как правила не следуют никаким отступам.

Например, мы можем расширить код в файле SASS, как показано ниже — 

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

: компактный

Компактный стиль CSS конкурентно занимает меньше места, чем расширенный и вложенный. Основное внимание уделяется селекторам, а не его свойствам. Каждый селектор занимает одну строку, и его свойства также размещаются в той же строке. Вложенные правила располагаются рядом друг с другом без новой строки, и отдельные группы правил будут иметь новые строки между ними.

Например, мы можем сжать код в файле SASS, как показано ниже — 

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

: сжатый

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

Например, мы можем сжать код в файле SASS, как показано ниже —

48
Share: