Назад

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. В нем легко разобраться, поэтому время, потраченное на освоение, наверняка окупится потом при разработке веб-сайта.

 

У вас нет прав для комментирования.