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

В этой главе мы изучим SASS Output Style. Файл 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 каждому свойству и правилу соответствует отдельная строка. Он занимает больше места по сравнению со стилем вложенного CSS. Раздел Rules состоит из свойств, которые предназначены для использования в правилах, в то время как правила не имеют отступов.

Например, мы можем расширить код в файле 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, как показано ниже -

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

#first p { 
   width:10em 
} 

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