Статей про SASS(SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS-статей меня "зацепила", и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего. SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас". Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код. Пример SASS-кода: И то же самое на SCSS: Я выбрал SCSS в виду того, что он проще для восприятия коллегам с ним ещё не знакомым. Ещё стоило бы отметить что обычный CSS код вполне вписывается в SCSS синтаксис. Для начала нужно установить ruby. После чего нужно установить sass-gem ( gem install sass в консоли ). Если всё прошло гладко, то теперь вам доступна консольная программа sass. О всех нюансах её использования вы можете прочесть здесь ― sass --help. Я расскажу лишь о двух базовых возможностях: Если запустить sass с ключом --watch, то программа будет следить за указанными вами файлами. В случае их изменения, она автоматически пересоберёт все необходимые css-файлы (не все вообще, а только связанные с изменёнными). Предположим, что у вас есть следующая структура проекта: Необходимо чтобы sass отслеживал все изменения в css/scss/* и результат сохранял в css/*.css. В таком случае запускаем sass так ― sass --watch css/scss:css/.. Т.е. sass --watch [что]:[куда]. Если вам нужно единожды обновить css-файлы, то в место --watch применяем --update. Никакой слежки проводится не будет, так же как и проверок на необходимость обновления. Стоит отметить, что в отличии от Less, SASS не умеет компилировать свой код прямо в браузере. На мой взгляд, такой подход (компиляция на сервере или ПК-верстальщика) является единственно верным. Итак, мы подошли к самому главному. Начнём с @import. Изначально, до использования SCSS, весь CSS код движка, с которым мне по долгу службы приходится работать, находился в 1-ом огромном style.css файле. Моя IDE (Netbeans (кстати, вот плагин для подсветки синтаксиса)) работала с ним с существенными тормозами. Разбивать же его на множество файлов поменьше, и, при необходимости, склеивать их в 1 ― никто не хотел. SCSS решает этот вопрос автоматически. Стоит отметить 1 нюанс. Если скормить sass не конкретный файл-источник, а директорию, то css файлы не будут генерироваться для файлов начинающихся с _. Т.е. наличие файла style.scss приведёт к созданию style.css, а наличие файла _some.scss ― нет. Итак, для того, чтобы включить содержимое файла _template.scss или template.scss пишем В конечном счёте, вместо 1-го большого style.css файла у меня получилось более сотни мелких scss-файлов. С первого взгляда может показаться, что такое количество слишком велико и приведёт к страшным мукам. Однако, нужный мне файл я нахожу сразу исходя из удобной структуры каталогов. К тому же, я полагаю, что благодаря кешированию такая "схема" более производительна. Одна из самых желанных "фич" для CSS ― вложенность селекторов. Пример: Ещё пример: Символ & равносилен родительскому селектору. Допустим тег <body> у нас имеет класс ie_7, в случае если в качестве обозревателя у нас Internet Explorer 7. Следующий код позволяет избавиться от всех "хаков" и спец.комментариев: Переменные ― удобная штука. Определяются они так: Переменные ― не константы, их можно менять по ходу кода :) Одна из первых моих мыслей вылилась в _const.scss файл, который заключает в себе все базовые цвета, размеры шрифтов и пр. Предполагается, что цвет ссылок на сайте ― $link.  Если в дальнейшем выяснится, что цвет ссылок изменился ― достаточно поменять 1 переменную (в случае CSS нужно было бы пройтись авто-заменой по файлам, возможно даже выборочно). Предположим, что внезапно выясняется, что в некотором модуле contacts, цвет ссылок другой. Есть, как минимум, два пути решения.  Первый: Второй Переменные у нас не типизированные, поэтому с равным успехом могут содержать строки, числа и цвета. Разделим математику на 2 категории ― цвета и числа. Начнём с чисел. Простой пример: При желании можно и padding с border-ом задавать переменными. Всё зависит от сложности вёрстки.  Ещё пример: Хочу отметить, что подобного рода манипуляции применяются очень часто. Без них я как без ног. А теперь цвета. Цвета можно складывать, перемножать: Довольно удобная штука, когда лень подбирать цвета. Также доступны такие функции как opacify и transparentize (более подробно). SASS умеет складывать строки, а также поддерживает конструкцию #{} Полагаю, что наибольшее применение операциям над строками можно найти в @миксинах и переменных, указывающих пути к изображениям и пр. В виду того, что статья получилась довольно объёмной, я решил разбить её на 2 части. В следующей статье я рассмотрю (синтаксис и область применения): frontend-программист