Двадцать пятый урок. CSS-препроцессор Sass

CSS-препроцессоры — это специальные программы, которые упрощают написание css-кода. Самый простой пример — это использование переменных. Например задается цвет ссылки, который многократно используется по коду дальше. Если нужно поменять цвет, достаточно будет только поменять значение переменной.

Из самых распространённых препроцессоров стоит отметить Less и Sass. Несколько лет назад популярным был Less, но постепенно он уступил место Sass. Главная проблема Less — слишком медленная работа. По функциональности оба препроцессора примерно одинаковы. Синтаксис Sass больше похож на язык программирования, вроде PHP, а Less ближе к нативному CSS.

В любом случае мы будем использовать только Sass, так что перед тем, как что-то делать, следует его установить на компьютер.

Sass для своей работы использует Ruby — это тоже язык программирования. Для начала следует загрузить Ruby с официального сайта. Выберите тот файл, который соответствует вашей операционной системе.

После установки Ruby запустите консоль (Выполнить: cmd) и введите команду:

gem --version

Вы должны увидеть номер версии gem — это установщик пакетов для Ruby, например 2.7.3. Если появляется какая-то ошибка, значит что-то установлено неверно. Возможно Ruby следует устанавливать по пути, не содержащим русских букв, или даже в корень диска C.

После того, как проверили работу gem, можно установить Sass. Там же в консоли наберите

gem install sass

Для проверки работы Sass наберите:

sass -v

Это версия Sass, например Sass 3.5.3 (Bleeding Edge).

Работа с Sass происходит примерно так:

Работу Sass проверим на простом scss-файле. Если возникнут ошибки, Sass выдаст предупреждение.

Создайте в любом каталоге style.scss такого содержания (синтаксис рассмотрим позже):

p {
	color: blue;
	
	b { color: red; }
}

Теперь в этом же каталоге в консоли (обратите внимание на путь) выполните:

sass --watch style.scss:style.css

Появится сообщение о создании файлов style.css и style.css.map и сообщение «Sass is waiting for changes. Press Ctrl+C to stop» — Sass в режиме ожидания. Измените style.scss:

p {
	color: blue;
	
	b { color: red; }
	i { color: green; }
}

Сразу после сохранения файла, Sass отрапортует о новой компиляции. Если это всё, то консоль можно закрыть.

Теперь откроем созданный style.css и увидим такой css-код:

p { color: blue; }
p b { color: red; }
p i { color: green; }

Здесь мы видим замечательное свойство препроцессоров — группировка стилей или вложености. В данном примере блок P включает в себя, помимо собственных стилей, ещё и блоки B и I, создавая визуальную иерархию, как это происходит в HTML.

Файл style.css.map — т.н. карта стилей. Строго говоря она нужна только для того, чтобы получить дополнительные возможности для работы со стилями в режиме вебмастера в браузере. Для сайта этот файл никакой роли не играет.

Для того, чтобы каждый раз не запускать консоль, проще всего сделать bat-файл, который будет сам стартовать Sass с нужными параметрами. Здесь важный момент касается расположения исходных и результирующего файлов — нужно учесть правильные пути в параметрах.

Возьмём за основу UniCSS расположение:

сайт/
	assets/
		css/
			style.css - автоматически создается Sass
			
		sass
			style.scss - исходный sass-файл
	
	
	sass-watch.bat - его запускаем
Сам файл sass-watch.bat будет состоять из одной строчки:
start /min sass --watch assets/sass/:assets/css/ --sourcemap=none --style compressed

В данном случае bat-файл запускает sass в минимизированном состоянии (свернутом в панель задач), с ключами --watch (отслеживать изменения), --sourcemap=none (не создавать map-файл) и --style compressed (сжимать css-код).

Вместо compressed можно указать expanded или compact — они делают код более читабельным.

Sass может отслеживать изменения не только в указанном файле, но и в каталогах (включая подкаталоги). Здесь именно так и указано: assets/sass/ — каталог исходных файлов, assets/css/ - результирующие. Двоеточие — служебный разделитель.

Если в каталоге assets/sass/ изменится любой файл, то запустится компиляция и результат будет помещён в каталог assets/css/, где имена файлов останутся теми же, но поменяется расширение с scss на css.

Если scss-файл начинается с «_» (подчеркивание), то этот файл не компилируется, хотя отслеживается. Эта особенность позволяет разделять css-код по файлам и каталогам для удобства работы. Создается только один scss-файл, например style.scss в котором с помощью команды @import подключаются другие scss-файлы. По такой схеме работают почти все css-фреймворки, да и в процессе своей верстки вы будете использовать аналогичный алгоритм.

Sass поддерживает два вида написания кода: в ruby-стиле (sass) и css-стиле (scss). В css-стиле для задания блоков используются фигурные скобки. В ruby же — отступы табулятором или пробелами:

p 
	color: blue;
	
	b 
		color: red;
		
	i  
		color: green;

Мы всегда используем только css-стиль с фигурными скобками.

В процессе работы, Sass создает служебный каталог .sass-cache. Как правило он не мешает, но при необходимости его можно спокойно удалить. Если потребуется Sass создаст его заново.

Задания

1. Настройте Sass-компиляцию для UniCSS.

2. В файле _my-template.scss разместите свой css-код. Убедитесь, что компиляция прошла успешно. Проверьте результирующий style.css — там должен быть ваш код.

3. Умышленно сделайте в css-коде ошибку синтаксиса и проверьте как Sass выдает об этом сообщение. Посмотрите какой при том создался style.css.