Sass

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

Назначение Sass

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

Основные задачи:

• оптимизация структуры CSS-кода;

• сокращение повторяющихся объявлений;

• введение дополнительных конструкций, отсутствующих в стандартном CSS;

• унификация стилей через переменные, функции и примеси;

• разделение кода на модули для удобства сопровождения.

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

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

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

Типы поддерживаемых значений:

• строки;

• числа;

• списки;

• цвета;

• булевы значения;

• пустое значение null.

Пример объявления цветовой схемы:

$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

Изменение цвета выполняется в одном месте — достаточно обновить значение нужной переменной.

Синтаксисы SASS и SCSS

Sass поддерживает два синтаксиса, отличающихся правилами оформления.

1. SASS

Не использует фигурные скобки и точки с запятой. Строится на основе отступов. Расширение файла — .sass.

&:disabled
  color: $mdc-button-disabled-ink-color
  cursor: default
  pointer-events: none

2. SCSS

Синтаксис, максимально приближенный к CSS. Использует фигурные скобки. Расширение — .scss.

&:disabled {
  color: $mdc-button-disabled-ink-color;
  cursor: default;
  pointer-events: none;
}

Оба варианта поддерживают стандартные CSS-комментарии и Sass-комментарии //, которые исключаются из итогового CSS.

Пример:

/* обычный CSS-комментарий */

.main-header {
  background-color: $primary_1; // однострочный комментарий
}

Принцип работы препроцессора

Браузеры не интерпретируют Sass-код напрямую. Файлы .sass или .scss передаются компилятору, который формирует итоговый CSS. В результате в браузер попадают только валидные CSS-правила и классические многострочные комментарии, при этом внутренние служебные пометки Sass удаляются.

Такой подход позволяет использовать расширенный синтаксис, не нарушая совместимость с браузерами.

Установка Sass

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

Команды установки:

NPM

npm install -g sass

Homebrew

brew install sass/sass/sass

Chocolatey

choco install sass

Также существуют графические приложения, например Scout-App, позволяющие компилировать Sass без использования консольных команд.

Пример работы переменных

Переменные упрощают управление типографикой, цветами и размерами элементов интерфейса.

$myFont: Helvetica;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

.container {
  width: $myWidth;
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

После компиляции:

.container {
  width: 680px;
  font-family: Helvetica;
  font-size: 18px;
  color: red;
}

HTML-код подключает итоговый файл CSS:

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

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

Sass использует блочную модель области видимости. Значение переменной внутри блока доступно только вложенным элементам.

Пример:

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

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

h1 { color: green; }
p { color: red; }

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

Использование модификатора !global

Если переменная должна быть доступна во всей структуре файла, применяется флаг !global.

$myColor: red;

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}

Результат:

h1 { color: green; }
p { color: green; }

Глобальные переменные рекомендуется выделять в отдельный файл, например _globals.scss, который подключается через @import или @use.

Структурирование проекта

Sass позволяет организовывать стили в модули. Это снижает сложность файлов и упрощает поддержку.

Типичное разбиение:

• _variables.scss — переменные;

• _mixins.scss — примеси;

• _base.scss — базовые стили;

• _components.scss — оформление компонентов;

• _layout.scss — сетки и разметка;

• main.scss — сборочный файл.

Пример подключения:

@use 'variables';
@use 'mixins';
@use 'base';
@use 'components';

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

Примеры вложенности

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

.menu {
  padding: 0;

  li {
    list-style: none;

    a {
      text-decoration: none;

      &:hover {
        color: $primary_2;
      }
    }
  }
}

Компилятор разворачивает вложенность в стандартный CSS. Браузер получает привычные селекторы без дополнительной логики. Такая техника облегчает управление элементами интерфейса и уменьшает вероятность конфликтов между стилями.

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

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