Хорошая штука — этот ваш
sass. Шаблонизатор для CSS с функциями, переменными, макросами, дамами и преферансом.
На самом деле есть еще LESS. И в сети много холиваров, кто же круче. Но я выбрал SASS, а точнее его вторую реинкарнацию — SCSS.
У этого дела есть отличная документация и там сразу все понятно что делать.
Из полезного:
- можно задавать переменные, если часто один и тот же параметр используется в CSS-файле. Причем в переменную можно запихать не только один цвет а сразу весь "1px solid #333"
- вложенные определения: вместо div.class1 a можно вложить a в описание div.class1
- функции для работы с цветом! Сделать рамку того же цвета, но на 30% темнее. Или смешать с белым цветом в соотношении 30/70%? Наложить красный полупрозрачный блок на зеленый без поддержки opacity? И такое можно. А если запихать базовый цвет в переменную, то цвет всего сайта меняется одной строчкой.
- Несколько свойств и вложенные свойства можно объединять в макросы. Даже в параметризованные.
- В продолжении предыдущего пункта: есть библиотека Bourbon, которая реализует CSS3-свойства через макросы. Теперь не надо прописывать -moz, -o, -webkit, -ms для поддержки нестандартных свойств. Пишем @include border-radius(1px 4px), а bourbon сам позаботиться о префиксах и порядке параметров.
Естественно, никакой браузер это на прямую не поддерживает. Поэтому scss компилируется в обычный css: вложенные правила разворачиваются, переменные подставляются, функции возвращают результат. И тут начинается самое веселое — если относится к scss как к обычному языку программирования, то после компиляции можно получить какой-нибудь css файл на тысячи строк, где половина дублируется, а правила растут на 10 уровней в глубину. Такое может заставить и браузер загрустить.
Поэтому надо сначала читать документацию и
полезную статью, а только потом начинать писать. И запомнить, что не @include, а @export ваш лучший друг.
P.S.: LESS умеет (но можно и на сервере все делать тоже) компилировать свой скрипт прямо в браузере при помощи javascript. Это накладывает некоторые ограничения, но зато можно использовать скрипты в css
PhpStorm (и другие продукты) поддерживает SASS, но вложенные @media вводят его в заблуждение. Ждем исправлений.