CSS переменные

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

Основные принципы использования

  1. Глобальные переменные Все базовые переменные Element Plus определяются в корневом селекторе :root. Например:

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

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

  2. Локальные переменные компонентов Каждый компонент Element Plus использует набор локальных переменных, которые наследуют значения глобальных или могут быть переопределены внутри компонента:

    .custom-button {
  --el-button-bg-color: #f56c6c;
  --el-button-hover-bg-color: #e55a5a;
}

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

  3. Использование переменных в JS Element Plus поддерживает динамическую смену темы через CSS переменные с использованием JavaScript. Например, смена основной цветовой схемы:

    const setPrimaryColor = (color) => {
  document.documentElement.style.setProperty('--el-color-primary', color);
};

setPrimaryColor('#ff9900');

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

Ключевые группы CSS переменных

  • Цвета

    • --el-color-primary – основной цвет
    • --el-color-success – цвет успеха
    • --el-color-warning – предупреждение
    • --el-color-danger – ошибка
    • --el-color-info – информационный цвет

  • Типографика

    • --el-font-size-base – базовый размер шрифта
    • --el-line-height-base – базовая высота строки
    • --el-font-family – семейство шрифтов

  • Границы и тени

    • --el-border-radius-base – базовое скругление углов
    • --el-border-color – цвет границы
    • --el-box-shadow-base – базовая тень

  • Компонентные переменные Каждый компонент, например el-button, имеет набор своих CSS переменных:

    .el-button {
  --el-button-bg-color: var(--el-color-primary);
  --el-button-hover-bg-color: #66b1ff;
  --el-button-text-color: #ffffff;
}

    Это позволяет полностью управлять стилем компонента без изменения его внутреннего CSS.

Динамическая тема с CSS переменными

Element Plus облегчает создание переключаемых тем через CSS переменные:

  1. Определение базовых переменных для каждой темы:

    :root {
  --el-color-primary: #409eff;
  --el-color-background: #ffffff;
}

[data-theme='dark'] {
  --el-color-primary: #1f2d3d;
  --el-color-background: #141414;
}

  2. Переключение темы через JS:

    const toggleTheme = (theme) => {
  document.documentElement.setAttribute('data-theme', theme);
};

toggleTheme('dark'); // применяет тёмную тему

    Такой метод не требует перезагрузки компонентов и позволяет менять цвета и фон в реальном времени.

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

Если проект использует SCSS, CSS переменные можно комбинировать с SCSS-переменными для более мощной кастомизации:

$primary-color: #409eff;

:root {
  --el-color-primary: #{$primary-color};
}

Это удобно для интеграции Element Plus в существующие SCSS-структуры проекта.

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

  • Всегда использовать глобальные переменные для основных цветов и шрифтов, а локальные – только для уникальных элементов.
  • Для темизации лучше использовать атрибут data-theme вместо модификации каждой переменной вручную.
  • Проверять поддержку переменных браузерами: Element Plus ориентирован на современные браузеры, где CSS переменные поддерживаются нативно.
  • Комбинировать CSS переменные с JS для динамических интерфейсов, таких как пользовательские панели настроек.

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

Оглавление