Sass
Sass (или Syntactically Awesome Stylesheets) - это скриптовый метаязык, разработанный для упрощения файлов CSS. Этот модуль входит в Haml (HTML abstraction markup language), который используется для упрощения HTML.
Как Haml компилируется в HTML, так и Sass компилируется в обычные CSS-стили.
Выпуск Sass состоялся в ноябре 2006 года, актуальная стабильная на момент написания статьи версия - 3.5.6 от 23 марта 2018 года.
В зависимости от выбранного синтаксиса Sass-файлы могут иметь расширения:
- .sass - известный как синтаксис с отступами, через которые реализованы вложенные элементы; фигурных скобок нет;
- .scss - Sassy CSS, где используются фигурные скобки.
Так как Haml был написан Ruby-разработчиками, то и Sass унаследовал Ruby-подобный синтаксис, который значительно отличается от CSS. Поэтому в 2010 году был презентован новый синтаксис - SCSS, который приблизил синаксис Sass к CSS и сделал его более совместимым.
Каждый из этих синтаксисов имеет свои особенности и преимущества.
Синтаксис Sass
Этот синтаксис короче, в нем отсутствуют скобки и точки с запятой, поэтому набирать его проще.
Отступы имеют логическое значение, поэтому крайне важно следить за ними - неправильный отступ может сломать таблицу стилей. Отступ у блока селектора определяет вложенный селектор. Поэтому если случайно сместить элемент вправо, он внезапно может оказаться дочерним элементом другого элемента, что сильно изменит результат.
Такой синтаксис определенно понравится тем, кто в разработке использует Ruby или Python.
Синтаксис SCSS
Синтаксис полностью совместим с CSS, поэтому практически нет необходимости изучать его отдельно, по сути это просто CSS с дополнениями.
Синтаксис SCSS - это более читаемый код, в котором проще разобраться. Поэтому все больше разработчиков выбирают именно его; на нем разрабатываются инструменты и плагины для Sass.
В целом использовать синтаксис SCSS более удобно, чем Sass, поэтому если тем, кто не может сделать выбор, следует присмотреться именно к SCSS.
Основные преимущества Sass
Использование Sass дает ряд преимуществ, которые значительно экономят время и силы.
1. Использование переменных
Sass дает возможность назначать переменные. Их доступность определяет уровень вложенности селекторов; если они определяются вне вложенного селектора, то доступны глобально.
Переменные удобно использовать, если одно значение применяется несколько раз, в этом случае при помощи переменной все необходимые значения можно задать в начале кода и далее просто ссылаться на них. И если будет необходимо изменить значение переменной, то оно измениться и во всех остальных местах, где она проставлена.
В коде ниже задана переменная $width:
#main {$width: 6em !global; width: $width;} #sidebar {width: $width;}
А после компиляции код будет выглядеть вот так:
#main {width: 6em;} #sidebar {width: 6em;}
2. Вложенные правила
Sass дает возможность вкладывать правила CSS друг в друга. Благодаря этому становится намного проще редактировать стили.
Вложенные правила нужны не только для минимизации кода, но и для структурирования кода (наподобие HTML).
3. Использование дополнений
Дополнения позволяют следовать прекрасному правилу DRY: Don’t Repeat Yourself. Вместо того, чтобы копировать и множить куски одинакового кода, Sass предлагает сохранить его в переменную, а затем использовать там, где необходимо. При компиляции переменная будет преобразована в нужную часть кода.
4. Наследование
Sass дает возможность создать правило, а затем использовать его внутри другого. При этом все свойства класса будут переданы наследуемому элементу.
Заключение
Sass - это полезный инструмент, который значительно упрощает работу с CSS. В нем легко разобраться, поэтому время, потраченное на освоение, наверняка окупится потом при разработке веб-сайта.