Sass: установка и практическое руководство

Ноутбук с кодом CSS и SCSS на экране

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

Что такое Sass

Sass (Syntactically Awesome Style Sheets) — расширение CSS, добавляющее программные конструкции. Коротко: это препроцессор, который преобразует расширенный синтаксис в обычный CSS. Он помогает поддерживать большие кодовые базы, уменьшать дублирование и проводить повторное использование стилей.

Пояснение в одну строку: препроцессор — инструмент, который преобразует код из одного формата в другой перед тем, как он попадёт в браузер.

Почему использовать Sass

Позволяет объявлять и переиспользовать переменные и блоки стилей.
Упрощает поддержку крупного CSS-кода.
Совместим с любыми CSS-фреймворками.
Позволяет писать выражения, функции и модули.

Важно: Sass не отменяет необходимость знать базовый CSS и принципы адаптивного дизайна.

Уровни зрелости применения Sass

Низкий: несколько вспомогательных переменных и один миксин.
Средний: модульная структура с переменными, миксинами и функциями для компонентов.
Высокий: строгая архитектура (например, BEM + модульная структура), тесты стилей, CI-пайплайн для компиляции и проверки.

Установка Sass

Существует несколько способов запустить Sass на компьютере: клиентские приложения (LiveReload, Scout-App), скачивание с GitHub, менеджер пакетов npm. В этой статье разберём npm-установку — она подходит для большинства проектов и легко интегрируется в сборку.

Установка Sass с помощью npm

Установите Node.js и npm, если ещё не установлены.
В корне проекта создайте package.json (хорошая практика для любого npm-проекта).

Пример команды для создания простого 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"
}

Теперь установите Sass:

npm install sass

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

Примечание: пакет называется “sass” (официальная реализация на Dart), а не “node-sass” (устаревшая C++-зависимая реализация).

Типы файлов Sass

Sass поддерживает два синтаксиса:

.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

Для преобразования .scss/.sass в .css используется командная строка sass.

Компиляция одного файла:

sass file.scss > file.css

Компиляция директории (все файлы внутри):

sass scss:dist/css/

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

Автопересборка с –watch

В package.json можно добавить скрипт для наблюдения за изменениями:

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

Запуск в терминале:

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.

Совет: в CI используют разовую компиляцию или встроенную в сборщик задачу, в разработке — watch.

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

Переменные в Sass начинаются с $ и используются для хранения цветов, размеров, шрифтов и т. д. Они облегчают массовые изменения.

Пример:

$primary-color: blue;

body {
  color: $primary-color;
}

При компиляции переменные заменяются конкретными значениями: в итоговом CSS переменных Sass не остаётся.

Когда переменные мало подходят: если предпочтительно использовать runtime-переменные в браузере (CSS custom properties), комбинируйте подходы: используйте Sass для организации и CSS-переменные для динамики в рантайме.

Миксины

Миксин — это набор CSS-свойств, который можно подключать в разных местах с помощью @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: $num-one + $num-two;
  @return $sum;
}

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

Пример использования функции для вычисления размеров:

@function rem($px, $base: 16) {
  @return ($px / $base) * 1rem;
}

h1 { font-size: rem(32); }

Модули

Для крупных приложений стоит разбивать 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;
}

Поведение: @use изолирует пространство имён по умолчанию, чтобы избежать конфликтов имён.

Совет по структуре файлов:

scss/
- base/_reset.scss
- base/_typography.scss
- components/_button.scss
- layout/_grid.scss
- utils/_variables.scss
- utils/_mixins.scss
- main.scss

Подчёркивание в имени файла (_mixins.scss) указывает на partial — файл не компилируется отдельно.

Организация проекта шаг за шагом

Мини-методология для внедрения Sass в существующий проект:

Создайте папку scss и перенесите туда основные стили.
Разбейте крупные файлы на partials: _variables, _mixins, _base, _components.
Подключите partials в main.scss с помощью @use или @forward.
Настройте npm-скрипт для компиляции и watch.
Постепенно мигрируйте компоненты: копируйте, затем заменяйте повторяющийся код на миксины/функции.
Настройте проверку стилей (lint) и интеграцию в CI.

Когда Sass не нужен

Если проект очень маленький и не предполагает роста.
Если вы целенаправленно хотите использовать CSS-переменные для темы и динамичности на стороне клиента.

Контрпример: одностраничный лендинг с одним CSS-файлом может не выиграть от внедрения препроцессора.

Альтернативы и совместные подходы

Less — аналогичный препроцессор; синтаксис чуть другой.
PostCSS — плагиновая система для трансформации CSS; отлично подходит для современных workflow.
CSS Modules / Styled Components — решения на уровне компонентов (часто в React-проектах).

Выбор зависит от команды, стекa и требований к рантайм-динамике.

Тесты и критерии приёмки

Критерии приёмки для внедрения Sass в проект:

Скрипт компиляции работает локально и в CI.
Исходные partials не влияют на производительность сборки.
Нет дублирования блоков стилей после рефакторинга.
Документация по структуре папок и правилам именования доступна команде.

Примеры тест-кейсов:

Изменить $primary-color — проверить, что все нужные компоненты получили новый цвет.
Подключить новый миксин — убедиться, что итоговый CSS содержит ожидаемые свойства.
Запуск npm run sass в режиме watch — убедиться, что изменения автоматически компилируются.

Миграция с обычного CSS на Sass

План миграции:

Создайте scss/main.scss и импортируйте текущий CSS с помощью @use или просто подключите как .scss (удалите лишние точки с запятыми при необходимости).
Вынесите повторяющиеся значения в переменные.
Группируйте повторяющиеся наборы свойств в миксины.
Разбейте файлы на partials и подключайте их в main.scss.
Настройте автоматическую сборку и CI.

Советы локализации для России и сходных регионов: используйте шрифты и значения по умолчанию, подходящие для кириллических шрифтов (например, тестируйте межбуквенные расстояния и высоты строк).

Проверка безопасности и приватности

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

Решение: нужно ли внедрять Sass

flowchart TD
  A[Есть большой CSS или рост проекта?] -->|Да| B[Использовать Sass]
  A -->|Нет| C[Оставить plain CSS или использовать CSS-переменные]
  B --> D{Нужны миксины и модули?}
  D -->|Да| E[Разбить на partials и настроить @use]
  D -->|Нет| F[Начать с переменных и простых миксинов]

Ролевые чек-листы

Для фронтенд-разработчика:

Настроить package.json и npm-скрипты.
Разбить стили на partials.
Создать набор переменных для бренд-цветов и типографики.
Написать документацию по использованию миксинов.

Для дизайнера:

Согласовать список переменных (цвета, отступы, размеры шрифтов).
Тестировать изменения на макетах с кириллицей.

Для DevOps:

Добавить команду сборки в CI.
Контролировать кэширование скомпилированных CSS-файлов.

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

Препроцессор — инструмент, преобразующий код в другой формат до исполнения.
Partial — файл Sass, предназначенный для импорта и не компилируемый отдельно.
Миксин — переиспользуемый набор CSS-свойств.
Функция — блок кода в Sass, возвращающий значение.

Резюме

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

Важно

Sass мощный инструмент, но он не заменяет хорошую организацию CSS и понимание основ вёрстки.

Конец статьи

Введение в Sass: установка и практическое использование