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

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

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

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

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

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

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

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

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Препроцессоры Sass и Less

Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

Узнать подробнее

Метки:

Похожие статьи:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree