Руководство по Sass: установка, функции и лучшие практики

TL;DR

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

Важно: Sass компилируется в обычный CSS — браузеры работают только с итоговым CSS.

Что такое Sass и зачем он нужен

Syntactically awesome style sheets (Sass) — популярный язык-расширение для CSS, существующий приблизительно 15 лет. Он совместим со всеми версиями CSS и со всеми библиотеками и фреймворками (Bootstrap, Foundation и т. д.).

Sass позволяет писать код в удобном синтаксисе и компилировать его в стандартный CSS. Его ценность заключается в дополнительных возможностях, которых долгое время не было в чистом CSS: переменные, миксины, функции, модульность и вложенность.

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

Установка Sass

Есть несколько способов запускать Sass на локальной машине: через настольные приложения (LiveReload, Scout-App), загрузив релиз с GitHub, или установив через npm (рекомендуется для проектов разработчиков).

Установка Sass через npm

Чтобы установить Sass через npm, нужен Node.js и npm на устройстве. Рекомендуется иметь файл package.json в корне проекта — это стандарт хорошей практики.

Создайте базовый package.json командой в терминале:

npm init -y  
  

Выполнение этой команды сгенерирует package.json со следующим содержимым:

{  
  
 "name": "my_app",  
  
 "version": "1.0.0",  
  
 "description": "",  
  
 "main": "index.js",  
  
 "scripts": {  
  
  "test": "echo \"Error: no test specified\" && exit 1"  
  
 },  
  
 "keywords": [],  
  
 "author": "",  
  
 "license": "ISC"  
  
}  
  

Файл package.json служит конфигурацией проекта: при установке пакетов npm он будет обновляться и фиксировать зависимости.

Установите Sass командой:

npm install sass  
  

Команда добавит зависимость в package.json, создаст package-lock.json и установит пакет в node_modules.

Типы файлов Sass

Файл Sass может иметь расширение .sass или .scss. Главное различие:

• .scss использует фигурные скобки и точки с запятой, похож на привычный CSS;
• .sass использует отступы для структуры, похож на Python.

Многие разработчики выбирают .scss из‑за схожести с CSS.

Пример .scss

$primary-color: blue;  
  
body {  
     color: $primary-color;  
  
    p {  
        color: red;  
    }  
}  

Пример .sass

$primary-color: blue  
  
body  
    color: $primary-color  
  
   p  
       color: red

Компиляция Sass в CSS

Вы можете скомпилировать отдельный файл командой sass:

sass file.scss > file.css

Или запустить компиляцию для всей директории:

sass scss:dist/css/

Эта команда компилирует все Sass-файлы в папке scss и сохраняет результат в dist/css.

Если вы используете npm, добавьте в package.json скрипт для удобства:

"scripts": {  
  
   "test": "echo \"Error: no test specified\" && exit 1",  
  
   "sass": "sass --watch scss:dist/css/"  
  
 },  
  

Опция –watch держит процесс в фоне и автоматически перекомпилирует файлы при изменениях. Для каждого исходного файла Sass будет создан файл .css и .css.map.

Запуск скрипта:

npm run sass  
  

Пример ожидаемого вывода в терминале:

> my_app@1.0.0 sass C:\Users\kadeisha\Documents\my_app  
  
> sass --watch scss:dist/css/  
  
Compiled scss\main.scss to dist\css\main.css.  
  
Sass is watching for changes. Press Ctrl-C to stop.  

Переменные в Sass

Переменные — одна из самых полезных особенностей. Каждая переменная начинается с символа $ и хранит значение (цвет, размер и т. п.). Изменив значение переменной, вы обновляете все места её использования.

Пример:

$primary-color: blue;  
  
  
body {  
  
   color: $primary-color;  
  
}

Результат компиляции:

body {  
    color: blue;  
}  
  

Важно: Sass-переменные компилируются в конкретные значения в итоговом CSS — они не становятся CSS-переменными (custom properties) автоматически.

Миксины

Если нужно повторно использовать набор свойств, удобнее создать миксин. Миксины создаются с помощью @mixin и подключаются через @include. Они принимают параметры и поддерживают значения по умолчанию.

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

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {  
  
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  
  
   background-color: $primary-color;  
  
   color: $secondary-color;  
  
}  
  
  
#home {  
  
   @include light-theme(blue);  
  
}  
  

Компиляция даст:

#home {  
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;  
  background-color: blue;  
  color: #2c2c2c;  
}  

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

Функции

Функция в Sass должна возвращать значение. Их используют для вычислений и логики.

@function add-numbers($num-one, $num-two){  
  
   $sum: 0;  
  
   $sum: $num-one + $num-two;  
  
   @return $sum    
  
}  
  

Функции могут содержать условные выражения (if), циклы (for), и другие управляющие конструкции, что делает Sass выразительным для вычислений размеров, оттенков и т. п.

Модули

Модули позволяют разбить код на отдельные файлы: шрифты, переменные, миксины, функции и т. д. Для подключения используют @use.

Пример разнесения миксина в отдельный файл.

Файл mixins.scss

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {  
  
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  
  
   background-color: $primary-color;  
  
   color: $secondary-color;  
  
}  

Файл main.scss

@use 'mixins';  
  
#home{  
   @include mixins.light-theme;  
}

При компиляции main.scss итоговый CSS:

#home {  
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;  
  background-color: white;  
  color: #2c2c2c;  
}  

Модули помогают избежать глобального «загрязнения» пространства имён и упрощают поддержку крупных проектов.

Практические рекомендации и лучшие практики

• Держите структуру проекта предсказуемой: папки scss/, components/, base/, utils/.
• Переменные и функции храните в отдельной папке utils или vars.
• Используйте @use вместо устаревшего @import для модульности.
• Для тем и вариаций используйте миксины и карты (maps).
• Включайте автопрефиксер (PostCSS Autoprefixer) в сборку для поддержки браузерных префиксов.
• Не дублируйте стили — выносите повторяющиеся группы в миксины или placeholder-селекторы (%placeholder).

Когда Sass может не подойти

• Для очень простых статических сайтов пользование Sass может быть избыточным — достаточно небольшого CSS-файла.
• Если ваша команда полностью использует runtime CSS-in-JS (React styled-components, Emotion), интеграция Sass даёт меньше преимуществ.
• При желании использовать динамическую тему на клиенте (изменяемые пользователем значения без пересборки) лучше применять CSS-переменные (custom properties), комбинируя их с Sass при сборке.

Альтернативы и сочетания

• Less — похожий препроцессор, имеет свою синтаксическую модель;
• PostCSS — инструмент для трансформации CSS с плагинами (включая поддержку переменных и автопрефиксер);
• CSS Custom Properties — нативные переменные, работающие в рантайме; подходят для динамических тем.

Частая практика — комбинировать Sass на этапе сборки и CSS-переменные для runtime-настройки тем.

Быстрая шпаргалка команд

• Установить sass: npm install sass
• Скомпилировать один файл: sass file.scss > file.css
• Наблюдать за папкой: sass –watch scss:dist/css/
• Скрипт npm: “sass”: “sass –watch scss:dist/css/“

Мини-методология для перехода на Sass в проекте

1. Подготовьте структуру папок: scss/{base,components,layout,utils}
2. Вынесите переменные и миксины в utils/
3. Подключите сборщик (npm script, Gulp, webpack) и Autoprefixer
4. Переименуйте .css в .scss постепенно, рефакторя по компонентам
5. Вводите @use и избегайте глобальных @import
6. Добавьте линтер стилей (stylelint) и CI-проверки

Критерии приёмки

• Итоговый CSS корректно генерируется без ошибок сборки;
• Размер и структура сгенерированных файлов отвечает требованиям производительности;
• Темы и переменные работают ожидаемо после сборки;
• Код покрыт базовыми линтерными правилами и прошёл CI-проверку.

Небольшая галерея ошибок и как их избегать

• Ошибка: забыли добавить точку с запятой в .scss — приводит к ошибке парсинга. Решение: использовать форматтер и линтер.
• Ошибка: дублирование переменных в разных модулях — используйте единый файл переменных и импортируйте его через @use.
• Ошибка: ожидание, что Sass-переменные будут доступны в рантайме — используйте CSS-переменные для runtime-настроек.

Краткий глоссарий

• Миксин — переиспользуемый набор свойств; подключается через @include.
• Модуль — файл с Sass-логикой, подключается через @use.
• Placeholder (%name) — селектор-заглушка для @extend.
• CSS-переменная — custom property, доступна в рантайме: –color.

Заключение

Sass остаётся мощным инструментом для разработки крупных и средних проектов, где важна повторяемость, модульность и удобство поддержки стилей. Вы узнали, как установить Sass, отличия .scss и .sass, как использовать переменные, миксины, функции и модули, а также лучшие практики и типичные ошибки.

Начните с небольшой структуры проекта и постепенно выносите повторяющиеся стили в миксины и переменные. Комбинируйте Sass с CSS-переменными там, где нужна динамика в рантайме.

Краткое напоминание: итоговая цель — понятный и поддерживаемый CSS, который легко менять и масштабировать.