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

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

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

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

#first {
 background-color: #00FFFF;
 color: #C0C0C0; 
}
#first p {
 width: 10em; 
}
.highlight {
 text-decoration: underline;
 font-size: 5em;
 background-color: #FFFF00; 
}

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

#first {
 background-color: #00FFFF;
 color: #C0C0C0;
}
#first p {
 width: 10em;
}
.highlight {
 text-decoration: underline;
 font-size: 5em;
 background-color: #FFFF00;
}

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

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

#first p { 
 width: 10em; 
}

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

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

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

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

Узнать подробнее
#first { 
 background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
 width:10em 
} 

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree