Переменные CSS

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

Определение и структура переменных

В Element Plus переменные CSS обычно имеют префикс --el-, что упрощает идентификацию и предотвращает конфликты с другими стилями. Пример базового определения переменных:

:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-font-size-base: 14px;
  --el-border-radius-base: 4px;
}

Ключевые моменты:

  • --el-color-primary — основной цвет интерфейса.
  • --el-font-size-base — базовый размер текста для компонентов.
  • --el-border-radius-base — скругление углов элементов.

Эти переменные могут использоваться в стилях компонентов через функцию var():

.el-button {
  background-color: var(--el-color-primary);
  border-radius: var(--el-border-radius-base);
  font-size: var(--el-font-size-base);
}

Переопределение переменных

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

.custom-button {
  --el-color-primary: #ff6600;
  --el-border-radius-base: 8px;
}

В результате кнопка, использующая .custom-button, наследует эти значения без изменения глобальных настроек.

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

Element Plus поддерживает темизацию через CSS-переменные. Для создания светлой или тёмной темы достаточно определить набор переменных для каждого режима:

/* Светлая тема */
.theme-light {
  --el-color-primary: #409eff;
  --el-background-color: #ffffff;
  --el-text-color: #303133;
}

/* Тёмная тема */
.theme-dark {
  --el-color-primary: #1f2d3d;
  --el-background-color: #303133;
  --el-text-color: #ffffff;
}

Переключение темы осуществляется добавлением соответствующего класса к корневому элементу:

document.documentElement.classList.add('theme-dark');
document.documentElement.classList.remove('theme-light');

Динамическая модификация через JavaScript

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

const root = document.documentElement;

// Изменение основного цвета
root.style.setProperty('--el-color-primary', '#ff4d4f');

// Изменение скругления углов
root.style.setProperty('--el-border-radius-base', '12px');

Это особенно удобно при построении конструкторов интерфейса или кастомизации пользовательских тем.

Интеграция с SASS/SCSS

Element Plus предоставляет SCSS-файлы для тонкой настройки, где CSS-переменные могут быть заданы через SCSS-переменные:

$--color-primary: #409eff;
$--border-radius-base: 4px;

@import "element-plus/theme-chalk/base.scss";

В процессе сборки SCSS переменные преобразуются в CSS-переменные, что сохраняет совместимость с динамическим переопределением через var().

Практические советы

  1. Использовать префикс --el- для всех переменных, чтобы избежать конфликтов с другими библиотеками.
  2. Централизовать основные переменные в :root для глобальной стилизации.
  3. Переопределять переменные на уровне контейнера, а не напрямую в компонентах, чтобы сохранить масштабируемость.
  4. Совмещать CSS-переменные с SCSS-переменными, если требуется предварительная обработка и вычисление значений.
  5. Использовать динамическое изменение через JavaScript для создания адаптивного и интерактивного интерфейса без повторного рендеринга компонентов.

Примеры комплексного применения

Кастомизация кнопки с темой и динамическим цветом:

<template>
  <el-button class="theme-button">Нажми меня</el-button>
</template>

<style>
.theme-button {
  --el-color-primary: #f56c6c;
  --el-border-radius-base: 10px;
  background-color: var(--el-color-primary);
  border-radius: var(--el-border-radius-base);
  color: white;
  font-size: var(--el-font-size-base);
}
</style>

<script>
const button = document.querySelector('.theme-button');
button.addEventListener('mouseenter', () => {
  document.documentElement.style.setProperty('--el-color-primary', '#67c23a');
});
button.addEventListener('mouseleave', () => {
  document.documentElement.style.setProperty('--el-color-primary', '#f56c6c');
});
</script>

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

Хотите, я подготовлю следующую главу про CSS-переменные для анимаций и переходов в Element Plus с практическими примерами?

Оглавление