Начинаем использовать SASS

На основе данных с Wikipedia, Sass (Syntactically Awesome Stylesheets) — модуль, включенный в Haml. Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Язык Sass имеет два синтаксиса:

старый — sass — отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов;
новый — SCSS (Sassy CSS) — использует фигурные скобки, как и сам CSS.

В данной статье мы будем рассматривать новый синтаксис SCSS, потому как он более новый, порог вхождения ниже, чем у оригинального SASS и он является обратносовместимым с CSS.

Положительные стороны использования SASS:

в разработке более 8 лет.
3 мажорных версии.
Огромное community.

Кроме этого существует достаточно большое количество css-frameworks и библиотек, который написаны на SCSS. Среди них стоит выделить особо популярные:

Compass,
Bourbon,
Gumby,
Susy.

УСТАНОВКА И КОМПИЛЯЦИЯ

Sass можно установить и компилировать несколькими способами.

1. С помощью Ruby.

2. C помощью Libsass.

Рассмотрим оба варианта более детально.

RUBY

Для возможности работы с SASS нам требуется установить Ruby себе на ПК. После установки терминала, в командной строке Ruby:
$ gem install sass // устанавливаем себе SASS

$ sass -v
// показывает установленную версию, также подтверждает,
// что у нас все правильно установилось

После установки Ruby и SASS заходим в нужную директорию через и пишем в командной строке:
sass --watch path/to/src: path/to/dist --style expanded

И это все. Теперь встроенный watcher будет следить за нашими Sass файлами и при изменении будет компилировать в указанную папку.

Рассмотрим более детально способы приведения скомпилированного кода CSS в нужный нам порядок. Существует 4 возможных варианта :

1. expanded

2. nested

3. compact

4. compressed

LIBSASS

Libsass это экспериментальная библиотека написанная на C/C++. Ее основной задачей является компилирование SASS файлов. Она достаточно быстрая, но не стоит забывать, что она еще в процессе разработки.
Библиотека Libsass используется разными плагинами для task-builders, таких как Gulp.js и Grunt.js.
Мы в процессе верстки используем Grunt.js, поэтому рассмотрим примеры компиляции SASS файлов с помощью Grunt.js.
Скомпилировать SASS с помощью Grunt.js мы можем двумя плагинами:
grunt-sass (использует библиотеку Libsass) и grunt-contrib-sass (использует Ruby и gem sass).

Выше пример компиляции с помощью grunt—sass. Нам не нужно устанавливать Ruby для компиляции SASS, а вот для работы с плагином grunt—contrib—sass установить Ruby придется.

ПЕРЕМЕЩЕНИЕ ФАЙЛОВ (@IMPORT)

Мы можем подключать внешние файлы с помощью @import. Расширение прописывать не обязательно. Также мы можем подключать файлы непосредственно в код, в итоге получается, что то вроде шаблонизатора.

ПЕРЕМЕННЫЕ

Все очень просто.

Можем их объединять:

Флаги !default, !global.

!default — данный флаг позволяет установить значение переменной в случае, если оно еще не установлено или его текущее значение равно нулю.

Области видимости переменной с флагом !default.

А вот как себя поведет компилятор с двумя дефолтными переменными.

!global

В представленном ниже переменная неопределенна, потому что находится за пределами видимости ее использования.

Но с помощью использования флага !global мы можем использовать ее везде где нам нужно.

Флаг !global позволяет нам изменять область видимости локальной переменной, тоесть вызываться с любого участка кода.

Но при этом объявленная локально переменная имеет высший приоритет.

Иерархию приоритетов можно посмотреть на данном примере.

Правила вложенности переменных:

МИКСИНЫ

Простой пример

Миксины с аргументами:

Миксины с переменными аргументами:

Миксины – медиа-запросы @media-rules (mobile-first):

Пример использования:

ТИХИЕ КЛАССЫ (silent classes)

В SASS мы можем использовать silent classes, они не компилируются в код, но могут быть вызваны с директивой @extend.

Они очень схожи с миксинами, но разница все же присутствует:

ДИРЕКТОРИЯ @extends

Здесь все также достаточно просто.

ДИРЕКТОРИЯ @at—root

Данная директория позволяет нам выйти с любого уровня вложенности.

Также можем выйти с медиазапроса.

С переменными и с миксинами в данной статье мы закончили. Как видим все достаточно просто и если у кого то есть опыт использования LESS, то разница совсем не большая.

А сейчас обратим ваше внимание на типы данных SASS: