Изучаем Sass с нуля: установка, синтаксис и сборка CSS

Sass превращает исходники SCSS или indented Sass в обычный CSS. Установите Dart Sass, соберите style.scss, подключите style.css к HTML и разберите переменные, вложенность, миксины, модули и функции. В конце вы получите рабочую сборку с режимом наблюдения и сжатым CSS для публикации.

Что дает Sass по сравнению с CSS

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

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

• Переменные. Цвет или размер меняется в одном месте.
• Модули. Partial-файлы разделяют переменные, компоненты и темы.
• Миксины. Один набор свойств получает параметры и используется повторно.
• Форматы вывода. Expanded оставляет читаемый CSS, compressed уменьшает файл.

Что такое Sass и чем отличаются .sass и .scss

Sass расшифровывается как Syntactically Awesome Style Sheets. Проект поддерживает два синтаксиса исходников: SCSS использует фигурные скобки и точки с запятой, а indented Sass строит структуру отступами.

Файлы .sass и .scss служат исходниками. Dart Sass компилирует оба формата в .css.

SCSS-синтаксис

$color: #fff;

header {
  margin: 0;
  padding: 0;
  color: $color;
}

После компиляции Sass подставит значение переменной:

header {
  margin: 0;
  padding: 0;
  color: #fff;
}

Indented Sass-синтаксис

$color: #fff

header
  margin: 0
  padding: 0
  color: $color

Оба синтаксиса дают тот же CSS. Для практики выберите SCSS: его структура близка к привычным CSS-правилам.

Установка Dart Sass и первая компиляция

Для практики нужны Node.js, текстовый редактор и папка проекта. Откройте официальную страницу установки Sass и выберите вариант для своей системы.

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

1. Установите Node.js с официального сайта Node.js.
2. Откройте терминал и выполните npm install -g sass.
3. Введите sass --version. Терминал выведет номер версии, если команда доступна.

Установка из архива

На странице Sass Install скачайте архив Dart Sass для своей системы. Распакуйте его и добавьте каталог с исполняемым файлом в PATH. Команда sass --version выведет версию установленного Sass.

Ruby Sass снят с поддержки. Для новой установки используйте Dart Sass: пакет npm или архив со страницы установки Sass.

Подготовка файлов

Создайте папку с файлами index.html и style.scss. В HTML подключите результат компиляции:

<link rel="stylesheet" href="style.css">

Добавьте в style.scss простой стиль:

$color: #009a82;

h1 {
  color: $color;
}

Скомпилируйте исходник из папки проекта:

sass style.scss style.css

Рядом появится style.css, а заголовок на странице получит зеленый цвет.

h1 {
  color: #009a82;
}

Непрерывная сборка через --watch

Режим наблюдения пересобирает CSS после сохранения исходника. Запустите его из папки проекта:

sass --watch style.scss:style.css

После изменения style.scss терминал сообщит о новой компиляции. Обновленная страница покажет новое значение.

Использование переменных

Переменная начинается со знака $. Sass поддерживает строки, числа, цвета, логические значения, списки, карты и значение null.

@use "sass:map";

$brand: #009a82;
$space: 20px;
$font-stack: Arial, sans-serif;
$theme: (
  surface: #fff,
  text: #202020
);

.card {
  color: map.get($theme, text);
  background: map.get($theme, surface);
  margin: $space;
  font-family: $font-stack;
  border: 1px solid $brand;
}

Компилятор подставит значения карты и переменных:

.card {
  color: #202020;
  background: #fff;
  margin: 20px;
  font-family: Arial, sans-serif;
  border: 1px solid #009a82;
}

Вложенность селекторов

Вложенность группирует дочерние селекторы внутри родительского. Ограничивайте ее несколькими уровнями, чтобы итоговые селекторы оставались понятными.

$paragraph-size: 13px;
$title-size: 15px;
$subtitle-size: 14px;

#container {
  p {
    font-family: Arial;
    font-size: $paragraph-size;
  }

  h1 {
    font-family: Tahoma;
    font-size: $title-size;
  }

  h2 {
    font-family: Helvetica;
    font-size: $subtitle-size;
  }
}

Этот SCSS дает одинаковые размеры шрифта в исходнике и результате:

#container p {
  font-family: Arial;
  font-size: 13px;
}
#container h1 {
  font-family: Tahoma;
  font-size: 15px;
}
#container h2 {
  font-family: Helvetica;
  font-size: 14px;
}

Миксины и наследование правил

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

Миксин с @mixin и @include

Миксин хранит повторяемый фрагмент стилей. Параметры позволяют менять его свойства при каждом подключении.

@mixin outline($color, $width: 1px) {
  border: $width solid $color;
}

.card {
  @include outline(red, 2px);
}

Вызов @include подставит свойства в правило:

.card {
  border: 2px solid red;
}

Плейсхолдеры и @extend

Плейсхолдер с префиксом % сам не попадает в CSS. Директива @extend объединяет его селектор с селектором элемента.

%message {
  padding: 10px;
  border: 1px solid #009a82;
}

.notice {
  @extend %message;
  color: #202020;
}

Плейсхолдер исчезает, а его свойства получает селектор .notice:

.notice {
  padding: 10px;
  border: 1px solid #009a82;
  color: #202020;
}

Операторы и вычисления

Sass вычисляет числа с единицами. Ставьте пробелы вокруг оператора и указывайте единицу результата.

$myPadding: 20px;
$thickness: 1px;

#samplepara {
  padding: $myPadding + 30px;
}

#list1 {
  border-width: $thickness + 5px;
}

Компилятор выполнит арифметику до создания CSS:

#samplepara {
  padding: 50px;
}
#list1 {
  border-width: 6px;
}

Арифметическое деление через / устаревает. Подключите модуль sass:math и используйте math.div():

@use "sass:math";

.panel {
  width: math.div(600px, 2);
}

.panel {
  width: 300px;
}

Цветовые функции через sass:color

Подключите встроенный модуль sass:color для работы с цветом. Глобальные darken(), lighten(), saturate() и desaturate() в Dart Sass устаревают и могут выводить предупреждения.

@use "sass:color";

$background: #e6e6e6;
$text: #202020;

body {
  background: color.adjust($background, $alpha: -0.2);
}

h1 {
  color: color.scale($text, $lightness: 40%);
}

Функции модуля меняют цвет и прозрачность до вывода CSS:

body {
  background: rgba(230, 230, 230, 0.8);
}

h1 {
  color: #797979;
}

Описание модулей и функций есть в документации Sass.

Разбиение стилей на partials и подключение через @use

Большой файл разделите на partials – исходники с именем, начинающимся с подчеркивания. Sass не создает отдельный CSS для partial-файла, который подключает главный файл.

// _variables.scss
$brand: #009a82;

// _card.scss
@use "variables";

.card {
  border: 1px solid variables.$brand;
}

// style.scss
@use "card";

Соберите главный файл обычной командой:

sass style.scss style.css

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

.card {
  border: 1px solid #009a82;
}

Используйте @use для подключения модуля и @forward для передачи его публичных переменных и миксинов дальше. Директива @import устаревает и не подходит для новой структуры.

Форматы вывода CSS

Dart Sass поддерживает два формата вывода: expanded и compressed. Expanded используется по умолчанию и оставляет читаемые отступы.

sass style.scss style.css --style expanded

.card {
  border: 1px solid #009a82;
}

Для публикации соберите сжатый файл:

sass style.scss style.css --style compressed

.card{border:1px solid #009a82}

Форматы nested и compact относятся к старым реализациям Sass. В командах используйте два обычных дефиса: --style и --watch.

Как подключить Sass к рабочему проекту

Редактор кода нужен для подсветки SCSS и проверки синтаксиса. Сборщик проекта запускает Sass через npm-скрипт или встроенную интеграцию.

Для небольшого сайта достаточно команды sass --watch style.scss:style.css. В проекте на Vite добавьте Sass в зависимости проекта, после чего Vite обработает импортированный SCSS-файл.

Подключайте к HTML только итоговый style.css. Исходные partials и файл style.scss браузеру не нужны.

Итоговая сборка Sass

Установите Dart Sass через npm и проверьте доступность команды:

npm install -g sass
sass --version

Соберите обычный CSS:

sass style.scss style.css

Для автоматической пересборки используйте режим наблюдения:

sass --watch style.scss:style.css

Перед публикацией получите сжатый файл:

sass style.scss style.css --style compressed

Совет от нашей редакции: держите исходники в partials, подключайте их через @use, а в HTML оставляйте ссылку только на собранный CSS.