Урок 03

Переменные

Что такое переменные

Переменные SCSS — именованные значения, используемые многократно.

$primary: #c1442e;
$radius: 10px;
$font-base: 'Inter', sans-serif;

.button {
    background: $primary;
    border-radius: $radius;
    font-family: $font-base;
}

Что даёт:

Меняешь в одном месте — применяется везде.
Единый стиль.
Проще поддерживать.

Синтаксис

$name: value;

Правила имён:

Начинается с $.
Дефисы и подчёркивания эквивалентны ($color-primary = $color_primary).
Обычно kebab-case: $color-primary, $font-size-lg.

Правило: один стиль имён во всём проекте.

Типы значений

$number: 16px;
$color: #c1442e;
$string: 'Inter';
$bool: true;
$null: null;
$list: 1px 2px 3px 4px;
$map: (primary: #c1442e, secondary: #2e86c1);

Что можно:

Числа, цвета, строки.
Списки, map (ассоциативные массивы).
Boolean.

Область видимости

Глобальные — видны везде:

$primary: #c1442e;

Локальные — внутри блока:

.button {
    $padding: 12px 24px;
    padding: $padding;
}

// $padding недоступна здесь

Правило: глобальные переменные — в _variables.scss. Локальные — только если реально нужны.

`!default`

Значение по умолчанию — переопределяемое:

$primary: #c1442e !default;

Что даёт: если переменная не задана до этого — берётся значение. Если задана — сохраняется.

Пример:

// config.scss
$primary: #c1442e !default;

// main.scss
$primary: #0066cc;   // переопределяем
@use 'config';       // $primary = #0066cc

Правило: !default — для тем, библиотек, настраиваемых модулей.

`!global`

Изменение глобальной переменной из локальной области:

$counter: 0;

.block {
    $counter: 1 !global;
}

// $counter теперь 1

⚠️ Использовать осторожно. Признак плохой архитектуры.

Правило: почти никогда не нужно.

CSS-переменные vs SCSS-переменные

SCSS-переменная:

$primary: #c1442e;

.button {
    background: $primary;
}

CSS-переменная:

:root {
    --primary: #c1442e;
}

.button {
    background: var(--primary);
}

Разница:

SCSS — компилируется, значения вставлены напрямую в CSS.
CSS — работают в браузере, можно менять через JS, наследуются.

Когда что:

SCSS — для конфигов (цвета темы, размеры сетки).
CSS — для runtime (тёмная тема, динамика).

Комбинирование

$primary: #c1442e;
$radius: 10px;

:root {
    --primary: #{$primary};
    --radius: #{$radius};
}

.button {
    background: var(--primary);   // runtime
    border-radius: var(--radius);
}

Что даёт: SCSS для сборки, CSS для runtime.

Правило: значения задаются в SCSS, но живут в CSS-переменных.

Типичная структура переменных

_variables.scss:

// Цвета
$color-primary: #c1442e;
$color-primary-hover: #a83926;
$color-secondary: #2e86c1;
$color-success: #10b981;
$color-danger: #ef4444;
$color-warning: #f59e0b;

$color-bg: #fafafa;
$color-surface: #ffffff;
$color-border: #e5e5e5;
$color-text: #1a1a1a;
$color-text-muted: #6b6b6b;

// Типографика
$font-sans: 'Inter', system-ui, sans-serif;
$font-mono: 'JetBrains Mono', ui-monospace, monospace;

$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 18px;
$font-size-xl: 24px;
$font-size-2xl: 32px;

$line-height-tight: 1.2;
$line-height-base: 1.6;

// Отступы
$space-1: 4px;
$space-2: 8px;
$space-3: 12px;
$space-4: 16px;
$space-5: 24px;
$space-6: 32px;
$space-8: 48px;

// Скругления
$radius-sm: 4px;
$radius: 10px;
$radius-lg: 16px;
$radius-full: 999px;

// Тени
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
$shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);

// Breakpoints
$breakpoint-sm: 480px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;

// z-index
$z-dropdown: 100;
$z-sticky: 200;
$z-modal: 500;
$z-tooltip: 1000;

// Тайминги
$transition-fast: 0.15s;
$transition-base: 0.25s;
$transition-slow: 0.4s;

Использование с `@use`

Современный способ:

// _variables.scss
$primary: #c1442e;

// main.scss
@use 'variables' as v;

.button {
    background: v.$primary;
}

С namespace: v.$primary.

Без namespace:

@use 'variables' as *;

.button {
    background: $primary;
}

⚠️ as * — риск конфликтов имён. Лучше с префиксом.

Правило: @use 'variables' as v — чисто и понятно.

Карты (Map)

Группировка связанных значений:

$colors: (
    primary: #c1442e,
    secondary: #2e86c1,
    success: #10b981,
    danger: #ef4444,
);

.button--primary {
    background: map-get($colors, primary);
}

.button--danger {
    background: map-get($colors, danger);
}

Что даёт: связанные значения в одном месте.

Цикл по карте

@each $name, $color in $colors {
    .text-#{$name} {
        color: $color;
    }
}

Что даёт: классы .text-primary, .text-secondary и т.д. автоматически.

Вычисления

$base: 16px;
$scale: 1.25;

$font-lg: $base * $scale;       // 20px
$font-xl: $base * $scale * $scale;   // 25px
$half: $base / 2;               // 8px

Правило: SCSS умеет математику. Использовать для размеров.

Конфликты имён

Проблема:

$size: 16px;   // глобально
$size: 32px;   // другая часть проекта — перезаписал

Решение:

Namespace через @use 'variables' as v.
Префиксы: $color-primary, $space-4.

Практика

1. Создайте _variables.scss с цветами, типографикой, отступами.

2. Используйте через @use 'variables' as v.

3. Сделайте карту цветов и цикл по ней.

4. Скомпилируйте, проверьте CSS.

5. Попробуйте !default для кастомизации.

Частые ошибки

1. Глобальные переменные в каждом файле:

// В _buttons.scss
$primary: #c1442e;   // дублирует

Решение: только в _variables.scss.

2. Не использовать @use:

@import 'variables';   // устарело

Решение: @use 'variables' as v.

3. !global без причины:

Признак плохой архитектуры

Решение: перепроектировать.

4. SCSS-переменные для тёмной темы:

Не работает в runtime

Решение: CSS-переменные.

5. Карта без namespace:

map-get($colors, primary);   // какой $colors?

Решение: map-get(v.$colors, primary).

6. Слишком много переменных:

300 переменных, никто не помнит

Решение: сгруппировать по смыслу.

7. Дубли цветов:

$blue1: #0066cc;
$blue2: #0055aa;
$blue3: #004488;

Решение: один primary + функции.

8. Нет комментариев:

Что такое $lg? 1024px или 1280px?

Решение: группировать и комментировать.

Итог

Синтаксис: $name: value;.
Kebab-case в именах.
Глобальные — в _variables.scss.
!default — для настраиваемых значений.
CSS-переменные — для runtime.
SCSS-переменные — для сборки.
Map — для связанных значений.
@use 'variables' as v — современный способ.
Комбинировать SCSS + CSS-переменные.
Не дублировать значения.

Дальше — вложенность (nesting).