С начала 2014 года на работе произошли некоторые изменения, благодаря которым меня познакомили с замечательной штукой — препроцессор SASS и HAML. В этой статье рассматривается только SASS. Установлен он в паре с COMPASS, что позволяет ускорять процесс написания CSS до космических скоростей, а самое главное быстро вносить правки в существующий проект.
Для работы понадобится следующее:
- ruby
- гем sass
- гем compass
- редактор Webstorm
Немного поковырявшись с установкой и почитав инструкции, я незамедлительно начал готовить под типовые задачи. Самое убийственное это было правильно указать аргументы для compass, чтобы он брал только один главный файл sass, и преобразовывал это все в привычный css.
Смысл использования препроцессора в сокращении кода и его систематизации. Приведу пример: типовой сайт с шапкой, подвалом, колонками. Структура стилей будет выглядеть так:
Файл application.sass подключает в себя поочередно все файлы из директории general и преобразует это все в css. Но самое интересное здесь — это использование:
- миксинов (повторное использование)
- переменных (со значениями можно проводить арифметические действия)
- упрощенное написание
$headerHeight: 100px $leftColWidth: 200px $rightColWidth: 200px $basicMargin: 8px a text-decoration: none color: #369 &:hover text-decoration: underline color: #a00 &:active background: #ff0 .header height: $headerHeight background: #eee .logo width: $leftColWidth height: $headerHeight background: url('logo.png') #A00 .sidebar-first float: left width: $leftColWidth .sidebar-second float: right width: $rightColWidth .content margin: 0 $rightColWidth 0 $leftColWidth h1 font-size: $basicMargin*4
В начале объявлены переменные, которые используются несколько раз ниже. Их можно вынести в отдельный файл variables.sass. Также в sass используются табы, это видно в коде выше. Благодаря им строится вложенность селекторов.
На выходе мы получаем следующий css
a { text-decoration: none; color: #336699; } a:hover { text-decoration: underline; color: #aa0000; } a:active { background: yellow; } .header { height: 100px; background: #eeeeee; } .header .logo { width: 200px; height: 100px; background: url("logo.png") #aa0000; } .sidebar-first { float: left; width: 200px; } .sidebar-second { float: right; width: 200px; } .content { margin: 0 200px 0 200px; } .content h1 { font-size: 32px; }
Спустя вот уже полгода, писать на чистом css мне жутко неудобно. Теперь все разложено по полочкам.
Использование препроцессора SASS: 0 комментариев