День 11 | Добавляем переменные и шрифты — Продвинутый курс по верстке сайтов

Система дизайна с переменными

Сегодня мы создадим основу для всего проекта — систему дизайна. Это набор переменных, которые определяют цвета, шрифты, размеры и другие параметры вашего сайта. Использование переменных делает код поддерживаемым и позволяет легко изменять дизайн во всём проекте.

Что такое система дизайна? Это набор правил и значений, которые определяют, как выглядит ваш сайт. Например: "все кнопки должны быть оранжевого цвета #F36049" или "все заголовки используют шрифт Poppins размером 36px".

Создание файла _variables.scss

Создайте файл src/scss/_variables.scss. Этот файл будет содержать все переменные проекта.

// ============================================
// ЦВЕТА
// ============================================

// Основные цвета
$primary-color: #F36049;
$secondary-color: #667eea;
$accent-color: #764ba2;

// Текст
$text-dark: #323036;
$text-medium: #706D75;
$text-light: #999;

// Фон
$bg-white: #ffffff;
$bg-light: #f5f5f5;
$bg-dark: #1a1a1a;

// Статусы
$success: #10b981;
$warning: #f59e0b;
$error: #ef4444;
$info: #3b82f6;

// ============================================
// ТИПОГРАФИКА
// ============================================

$font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
$font-family-heading: "Poppins", $font-family-base;

$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;
$font-size-2xl: 24px;
$font-size-3xl: 30px;
$font-size-4xl: 36px;

$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

$line-height-tight: 1.2;
$line-height-normal: 1.5;
$line-height-relaxed: 1.75;

// ============================================
// ОТСТУПЫ
// ============================================

$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-2xl: 48px;
$spacing-3xl: 64px;

// ============================================
// BREAKPOINTS
// ============================================

$breakpoint-mobile: 768px;
$breakpoint-tablet: 1024px;
$breakpoint-desktop: 1280px;

// ============================================
// ДРУГИЕ
// ============================================

$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 12px;
$border-radius-xl: 16px;

$box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$box-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
$box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

Разберём каждую секцию:

Цвета

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

Формат HEX: Цвета записываются в формате HEX (шестнадцатеричном). Например, #F36049:

# — обозначает HEX формат
F3 — красный канал (от 00 до FF, то есть от 0 до 255)
60 — зелёный канал
49 — синий канал

Можно использовать и другие форматы: rgb(243, 96, 73) или rgba(243, 96, 73, 0.8) (последний параметр — прозрачность от 0 до 1).

Типографика

Типографика — это всё, что связано с текстом: шрифты, размеры, начертания, межстрочные интервалы.

font-family: Список шрифтов в порядке приоритета. Браузер будет использовать первый доступный шрифт.

font-size: Размеры шрифтов. Используйте систему (xs, sm, base, lg, xl и т.д.) для консистентности.

font-weight: Жирность шрифта. 400 — обычный, 700 — жирный. Промежуточные значения (500, 600) работают только если у шрифта есть соответствующие начертания.

line-height: Межстрочный интервал. Без единиц измерения (1.5) означает "в 1.5 раза больше размера шрифта".

Адаптивная типографика с clamp()

Современный CSS позволяет создавать адаптивные размеры шрифтов, которые плавно меняются в зависимости от ширины экрана. Для этого используется функция clamp().

Синтаксис: clamp(минимум, предпочтительное, максимум)

// Вместо фиксированных размеров:
$font-size-base: 16px;
$font-size-4xl: 36px;

// Используем адаптивные:
$font-size-base: clamp(14px, 2vw, 16px);
$font-size-4xl: clamp(28px, 5vw, 48px);

// Пример для заголовков:
h1 {
  font-size: clamp(32px, 5vw + 1rem, 64px);
  // минимум 32px, плавно растёт, максимум 64px
}

h2 {
  font-size: clamp(24px, 4vw + 0.5rem, 48px);
}

p {
  font-size: clamp(14px, 1.5vw + 0.5rem, 18px);
}

Как это работает?

clamp(32px, 5vw + 1rem, 64px)
На маленьком экране (мобильный): размер будет 32px (минимум)
На среднем экране: размер плавно увеличивается (5% от ширины + 1rem)
На большом экране: размер ограничен 64px (максимум)

Преимущества:

✅ Не нужно писать media queries для каждого размера шрифта
✅ Плавное масштабирование (не скачками)
✅ Всего одна строка вместо нескольких breakpoints

Готовый набор адаптивных размеров:

// В _variables.scss
$font-size-xs: clamp(10px, 1vw, 12px);
$font-size-sm: clamp(12px, 1.2vw, 14px);
$font-size-base: clamp(14px, 1.5vw, 16px);
$font-size-lg: clamp(16px, 1.8vw, 18px);
$font-size-xl: clamp(18px, 2vw, 20px);
$font-size-2xl: clamp(20px, 2.5vw, 24px);
$font-size-3xl: clamp(24px, 3vw, 30px);
$font-size-4xl: clamp(28px, 4vw, 36px);
$font-size-5xl: clamp(36px, 5vw, 48px);

Отступы (Spacing)

Использование системы отступов делает дизайн более гармоничным. Вместо случайных значений (15px, 23px, 31px) используйте систему (16px, 24px, 32px).

Breakpoints

Breakpoints (точки перелома) — это размеры экрана, при которых меняется макет. Например, на экранах меньше 768px показываем мобильное меню вместо обычного.

CSS Custom Properties (современный подход)

В дополнение к SCSS переменным, в современной разработке используются CSS Custom Properties (CSS переменные). Они работают в браузере и имеют свои преимущества.

Создание CSS Custom Properties

Добавьте CSS Custom Properties в _variables.scss после SCSS переменных:

// SCSS переменные (для компиляции, миксинов)
$primary-color: #F36049;
$secondary-color: #667eea;
$text-dark: #323036;
$spacing-md: 16px;
$font-size-base: 16px;

// CSS Custom Properties (для runtime, JavaScript, тем)
:root {
  --primary-color: #{$primary-color}; // Интерполяция SCSS в CSS
  --secondary-color: #{$secondary-color};
  --text-dark: #{$text-dark};
  --spacing-md: #{$spacing-md};
  --font-size-base: #{$font-size-base};
  
  // Можно добавить дополнительные значения
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-heading: "Poppins", var(--font-family-base);
}

Что такое интерполяция? #{$variable} — это способ вставить значение SCSS переменной в CSS. Это нужно, чтобы передать SCSS переменную в CSS Custom Property.

Использование CSS Custom Properties

// Вместо SCSS переменной:
.button {
  background: $primary-color; // Работает только в SCSS
}

// Используем CSS Custom Property:
.button {
  background: var(--primary-color); // Работает в браузере
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
}

Преимущества CSS Custom Properties:

✅ Работают в runtime — можно менять через JavaScript
✅ Поддерживают каскадность — можно переопределять в разных контекстах
✅ Работают в медиа-запросах (с 2023 года)
✅ Не требуют компиляции — работают напрямую в браузере
✅ Идеальны для тем — можно переключать светлую/темную тему

Пример: Темная тема

// Светлая тема (по умолчанию)
:root {
  --bg-color: #ffffff;
  --text-color: #323036;
}

// Темная тема
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

// Использование
body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s; // Плавный переход
}

// Переключение через JavaScript
document.documentElement.setAttribute("data-theme", "dark");

Гибридный подход (рекомендуется)

Лучший подход — использовать оба варианта вместе:

SCSS переменные — для миксинов, функций, медиа-запросов
CSS Custom Properties — для значений, которые нужно менять через JavaScript или для тем

// _variables.scss

// SCSS переменные (для компиляции)
$primary-color: #F36049;
$spacing-md: 16px;

// CSS Custom Properties (для runtime)
:root {
  --primary-color: #{$primary-color};
  --spacing-md: #{$spacing-md};
}

// В миксинах используем SCSS переменные
@mixin button($bg-color: $primary-color) {
  background: var(--primary-color); // В CSS используем CSS Custom Property
  padding: var(--spacing-md);
}

// Теперь можно менять цвет через JavaScript!
// document.documentElement.style.setProperty("--primary-color", "#ff0000");

Подключение веб-шрифтов

Теперь давайте подключим шрифты. Есть два основных способа.

Способ 1: Google Fonts (самый простой)

Google Fonts — это бесплатная библиотека веб-шрифтов. Огромный выбор, легко подключить.

Как подключить:

Откройте fonts.google.com
Найдите нужный шрифт (например, "Inter" или "Poppins")
Нажмите на шрифт, выберите нужные начертания (обычный, средний, полужирный, жирный)
Нажмите "Select this style" для каждого начертания
В правой панели вы увидите код для подключения
Скопируйте тег <link> и вставьте в src/index.html в секцию <head>

Пример:

<!-- В index.html, в секции <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet">

Что делают эти теги?

preconnect — предварительное подключение к серверам Google. Ускоряет загрузку шрифтов.
crossorigin — позволяет загружать ресурсы с другого домена (нужно для CORS).
Последний link — загружает сами шрифты. Параметры:
- family=Inter:wght@400;500;600;700 — шрифт Inter с начертаниями 400, 500, 600, 700
- family=Poppins:wght@600;700 — шрифт Poppins с начертаниями 600, 700
- display=swap — стратегия загрузки: показывать текст системным шрифтом, пока загружается веб-шрифт

Способ 2: Локальные шрифты через @font-face

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

Форматы шрифтов:

WOFF2 — самый современный и сжатый формат (рекомендуется)
WOFF — старый формат, но хорошо поддерживается
TTF/OTF — оригинальные форматы, но большие по размеру

Создайте папку для шрифтов: src/fonts/

Создайте файл src/scss/_fonts.scss:

@font-face {
  font-family: "CustomFont";
  src: url("../fonts/CustomFont-Regular.woff2") format("woff2"),
       url("../fonts/CustomFont-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CustomFont";
  src: url("../fonts/CustomFont-Bold.woff2") format("woff2"),
       url("../fonts/CustomFont-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Разберём @font-face подробно:

font-family — имя шрифта (как вы будете его использовать в CSS)
src — путь к файлам шрифта. Указывается несколько форматов для совместимости:
- Браузер попробует загрузить первый доступный формат
- WOFF2 — самый современный, используется первым
- WOFF — запасной вариант для старых браузеров
format() — указывает формат файла (помогает браузеру выбрать правильный)
font-weight — жирность этого файла шрифта
font-style — стиль (normal, italic)
font-display: swap — стратегия загрузки:
- swap — показывать текст системным шрифтом сразу, потом заменить на веб-шрифт
- block — не показывать текст, пока не загрузится шрифт (может быть долго)
- fallback — компромисс между swap и block

Импортируйте _fonts.scss в style.scss:

@import "fonts";
@import "variables";
// ... остальные импорты

Миксины для типографики

Миксины помогают переиспользовать код. Создайте src/scss/_mixins.scss (если ещё не создали):

// Миксин для заголовков
@mixin heading($size: $font-size-2xl, $weight: $font-weight-bold) {
  font-family: $font-family-heading;
  font-size: $size;
  font-weight: $weight;
  line-height: $line-height-tight;
  color: $text-dark;
  margin: 0;
}

// Миксин для текста
@mixin text($size: $font-size-base, $color: $text-medium) {
  font-size: $size;
  color: $color;
  line-height: $line-height-normal;
}

// Миксин для кнопки
@mixin button($bg-color: $primary-color, $text-color: white) {
  background: $bg-color;
  color: $text-color;
  padding: $spacing-sm $spacing-md;
  border: none;
  border-radius: $border-radius-md;
  cursor: pointer;
  font-weight: $font-weight-medium;
  transition: all 0.3s;
  
  &:hover {
    opacity: 0.9;
  }
}

Как использовать миксины:

// В ваших стилях
h1 {
  @include heading($font-size-4xl);
}

h2 {
  @include heading($font-size-3xl);
}

p {
  @include text();
}

.button {
  @include button();
  
  &.secondary {
    @include button($secondary-color);
  }
}

Преимущества миксинов:

Единообразие — все заголовки выглядят одинаково
Легко изменить — меняете миксин, меняется везде
Меньше кода — не нужно повторять одни и те же свойства

Практическое задание

Создайте файл _variables.scss с SCSS переменными для вашего проекта
Определите цветовую палитру (основные цвета, цвета текста, фона)
Определите систему размеров шрифтов
Определите систему отступов
Добавьте CSS Custom Properties в :root с интерполяцией SCSS переменных
Подключите шрифты через Google Fonts или @font-face
Создайте миксины для типографики (heading, text, button), используя гибридный подход
Импортируйте все файлы в style.scss
Примените и SCSS переменные, и CSS Custom Properties в базовых стилях
Попробуйте изменить CSS Custom Property через JavaScript (например, цвет кнопки)
Создайте простую темную тему через CSS Custom Properties
Проверьте, что всё работает (запустите npm run dev)

Советы по работе с переменными

Используйте осмысленные имена: $primary-color лучше, чем $color1
Группируйте переменные: цвета вместе, размеры вместе, и т.д.
Комментируйте: добавьте комментарии, объясняющие, для чего используется переменная
Не создавайте слишком много переменных: если цвет используется один раз, можно не выносить в переменную

Что дальше?

Отлично! Теперь у вас есть система дизайна. В следующем уроке мы начнём верстать шапку сайта, используя созданные переменные и миксины.

Материалы по теме

Глоссарий digital-терминов Глоссарий
Статьи блога по разработке и SEO Блог
Практические чеклисты по внедрению Чеклисты
Ваш сайт тормозит? Вот сколько денег вы теряете каждый день Статья

День 11 | Добавляем переменные и шрифты

Система дизайна с переменными

Создание файла _variables.scss

Цвета

Типографика

Адаптивная типографика с clamp()

Отступы (Spacing)

Breakpoints

CSS Custom Properties (современный подход)

Создание CSS Custom Properties

Использование CSS Custom Properties

Преимущества CSS Custom Properties:

Пример: Темная тема

Гибридный подход (рекомендуется)

Подключение веб-шрифтов

Способ 1: Google Fonts (самый простой)

Способ 2: Локальные шрифты через @font-face

Миксины для типографики

Практическое задание

Советы по работе с переменными

Что дальше?

Материалы по теме

Оставить заявку