От автора: CSS сам по себе веселый, однако стили становятся все больше, сложнее и труднее в обслуживании. Здесь может помочь препроцессор. Sass позволяет использовать функции, которых пока что нет в CSS. Например, переменные, вложенность, миксины, наследование и другие хорошие функции, которые оживляют CSS.
Как только начнете работать с Sass, он обработает Sass-файл и сохранить его в виде обычного CSS файла, который уже можно использовать на сайте.
Самый прямой способ через терминал. После установки Sass из терминала можно запустить sass input.scss output.css. Следить можно как за отдельными файлами, так и за всеми директориями. Кроме того, следить за папками или директориями можно с помощью флага —watch. Пример запуска Sass и отслеживания целой директории:
|
1 |
sass --watch app/sass:public/stylesheets |
Переменные
Представьте переменные, как способ хранения информации, которую можно использовать повторно в стилях. Хранить можно цвета, стеки шрифтов или любые значения CSS, которые необходимо повторно использовать. Sass использует символ $ для создания переменной. Пример:
|
1 2 3 4 5 6 7 |
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } |
Когда Sass отработает, он заменит переменные $font-stack и $primary-color на нормальные значения CSS и поместит их в код. Это крайне удобно при работе с цветами бренда и их последовательном распространении на сайте.
|
1 2 3 4 |
body { font: 100% Helvetica, sans-serif; color: #333; } |
Вложенность
При написании HTML вы могли заметить, что он имеет четкую вложенную и визуальную иерархию. CSS же такой структуры не имеет.
Sass позволяет использовать схожую с HTML визуальную иерархию вложенности CSS-селекторов. Учтите, что слишком сложные правила вложенности приведут к усложнению CSS, и его будет трудно обслуживать. Это плохая практика.
Пример типичных стилей для навигации на сайте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } |
Обратите внимание на то, как ul, li и a селекторы вложены внутрь nav. Это отличный способ организовать CSS и сделать его более читаемым. После генерации CSS вы получите примерно следующее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } |
Фрагменты
Вы можете создавать фрагментные файлы Sass, в которых будут храниться небольшие кусочки CSS, и эти файлы можно подключать в другие Sass файлы. Это отличный способ создания модульного CSS, упрощающий обслуживание кода. Фрагмент – это просто Sass файл, в имени которого первый символ нижнее подчеркивание. Файлы можно называть примерно так _partial.scss. Нижнее подчеркивание позволяет Sass понять, что это всего лишь фрагмент, и его не нужно генерировать в CSS файл. Sass фрагменты подключаются с помощью директивы @import.
Импорт
В CSS есть важная опция, с помощью которой можно разбить CSS на меньшие, более обслуживаемые кусочки. Единственный минус – каждый раз, когда в CSS встречается @import, происходит HTTP-запрос. Sass построен на основе CSS @import, однако вместо HTTP-запроса Sass совместит импортируемый файл с основным файлом, чтобы вы могли загрузить всего один CSS файл в браузер.
Например, у вас есть пара Sass файлов _reset.scss и base.scss. Мы хотим импортировать _reset.scss в base.scss.
|
1 2 3 4 5 6 7 8 9 |
// _reset.scss html, body, ul, ol { margin: 0; padding: 0; } |
|
1 2 3 4 5 6 7 8 |
// base.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; } |
Обратите внимание, что мы используем @import ‘reset’; в base.scss. Когда вы импортируете файл, не нужно указывать его расширение .scss. Sass умный и сам все поймет. После генерации CSS:
|
1 2 3 4 5 6 7 8 9 |
html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; } |
Миксины
Некоторые вещи в CSS немного утомительно писать, особенно в CSS3, где так много вендорных префиксов. Миксин позволяет сгруппировать CSS объявления, которые можно повторно использовать на сайте. Можно даже передавать значения, чтобы mixin был еще более гибким. Хороший пример использования – вендорные префиксы. Пример для border-radius.
|
1 2 3 4 5 6 7 8 |
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } |
Чтобы создать миксин, используйте директиву @mixin и задайте имя. Мы назвали наш миксин border-radius. Также мы используем переменную $radius внутри фигурных скобок. Т.е. мы можем передавать радиус или что-то другое. После создания миксин можно использовать в CSS. Для этого необходимо написать @include, после чего следует имя миксина. После генерации CSS код будет следующим:
|
1 2 3 4 5 6 |
.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } |
Расширение/наследование
Одна из самых полезных особенностей Sass. Директива @extend позволяет делиться набором CSS-свойств между селекторами. Это помогает не повторяться в Sass. В нашем примере мы создадим простые серии сообщений для ошибок, предупреждений и успеха.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; } |
Код выше позволяет взять CSS-свойства из .message и применить их к .success, .error и .warning. В сгенерированном CSS происходит магия, и это позволяет не присваивать HTML-элементам несколько классов. Код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } |
Операторы
Возможность делать вычисления в CSS очень полезна. В Sass есть несколько стандартных математических операторов типа +, -, *, / и %. В нашем примере мы будем вычислять ширину для aside и article.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complementary"] { float: right; width: 300px / 960px * 100%; } |
Мы создали очень простую гибкую сетку на основе 960px. Операции в Sass позволяет нам конвертировать пиксели в проценты без лишних сложностей. Сгенерированный CSS-код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complementary"] { float: right; width: 31.25%; } |
Источник: //sass-lang.com/
Редакция: Команда webformyself.
