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

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

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

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

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

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

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

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

  • Compass,
  • Bourbon,
  • Gumby,
  • Susy.

sass-fameworks

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

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

2

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

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

1. expanded

3

2. nested

4

3. compact

5

4. compressed

6

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).

7

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

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

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

8

ПЕРЕМЕННЫЕ

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

9

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

10

Флаги !default, !global.

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

11

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

12

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

13

!global 

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

14

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

15

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

16

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

17

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

18

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

19

МИКСИНЫ

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

20

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

21

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

22

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

23

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

24

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

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

25

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

26

27

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

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

28

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

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

29

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

30

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

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

31

Операции с данными.

if( );

32

33

for( );

34

each( );

35

36

while( );

37

ОПЕРАЦИИ С ЦВЕТАМИ

Sass работает со следующими форматами цветовой палитры:

  • #HEX,
  • RGB/ RGBa,
  • HSL/HSLa.

38

Смешивание цвета

39

Менять оттенок:

40

Осветлить, затемнить, сделать более/менее насыщенным , добавить серый оттенок:

41

Инвертировать цвет, менять значение каждого канала в плоть до отдельных значений rgb:

42

Невзирая на то, что по факту SASS не работает c HSV/HSB палитрой мы можем его заставить понимать и правильно компилировать нужные нам цвета.

43

Благодаря вот такой вот функции все цвета записанные в HSB/HSV будут правильно отображаться.

Всего хорошего!