Sass — стили вывода

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

:nested. Стиль nested — это стиль по умолчанию для SASS. Этот способ определения стилей весьма полезен в ситуациях, когда мы имеем дело с большими файлами CSS. Это делает структуру файла более читаемой и понятной. Каждое свойство прописано в отдельной строке, а количество отступов для каждого правила зависит от уровня его вложенности. Например, мы можем вставить в файл SASS следующий код:

:expanded. В стиле expanded каждое свойство и правило прописываются в отдельной строке. Это требует больше места по сравнению со стилем CSS nested. Раздел Правила состоит из свойств, которые записываются внутри правила с отступами, тогда как сами правила записываются без отступов. Например, мы можем расширить код в файле SASS, как показано ниже:

:compact. Стиль CSS compact занимает меньше места, чем expanded и nested. Он в первую очередь ориентирован на селекторы, а не на их свойства. Каждый селектор занимает одну строку, и его свойства также помещаются в одну строку. Вложенные правила записываются одно за другим, без переноса на новую строку. А отдельные группы правил располагаются одна под другой через пустую строку. Например, мы можем скомпилировать код в файле SASS следующим образом:

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

Источник: //www.tutorialspoint.com/

Редакция: Команда webformyself.

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