CSS-переменные и их применение

CSS-переменные (или кастомные свойства) представляют собой мощный инструмент для управления стилями компонентов Naive UI на уровне темы и отдельных элементов. Они задаются с помощью синтаксиса --имя-переменной и могут быть использованы внутри любого свойства CSS через функцию var(--имя-переменной).

В Naive UI каждая тема компонента имеет набор предопределённых CSS-переменных. Например, для компонента n-button существуют переменные, влияющие на цвет фона, цвет текста, отступы, радиус скругления и тени. Это позволяет централизованно изменять внешний вид всех кнопок в приложении без необходимости переписывать каждый компонент вручную.

:root {
  --n-button-color: #409eff;
  --n-button-text-color: #ffffff;
  --n-button-border-radius: 6px;
}
<n-button>Пример кнопки</n-button>

В данном примере кнопка автоматически наследует заданные переменные и будет иметь синий фон, белый текст и скругленные углы. Изменение переменной --n-button-color в :root обновит все кнопки одновременно.

Структура и приоритет CSS-переменных в Naive UI

CSS-переменные в Naive UI организованы иерархически. Существует несколько уровней:

  1. Глобальные переменные темы – задаются на уровне :root и применяются ко всем компонентам.
  2. Переменные компонента – могут быть переопределены локально для конкретного компонента.
  3. Переменные экземпляра компонента – задаются через проп style или class, имеют самый высокий приоритет.

Пример переопределения переменной только для конкретной кнопки:

<n-button style="--n-button-color: #67c23a;">Зелёная кнопка</n-button>

В этом случае глобальная переменная --n-button-color будет проигнорирована для этой кнопки, и фон станет зелёным.

Использование CSS-переменных для динамических тем

Naive UI позволяет менять тему приложения динамически, используя CSS-переменные. Обычно это делается через реактивное состояние, которое изменяет значения переменных:

<template>
  <div :style="themeVariables">
    <n-button>Тема меняется</n-button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const themeVariables = reactive({
  '--n-button-color': '#f56c6c',
  '--n-button-text-color': '#fff'
})
</script>

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

Наследование и переопределение переменных

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

.theme-dark {
  --n-button-color: #303133;
  --n-button-text-color: #ffffff;
}
.theme-light {
  --n-button-color: #409eff;
  --n-button-text-color: #ffffff;
}
<div class="theme-dark">
  <n-button>Тёмная кнопка</n-button>
</div>
<div class="theme-light">
  <n-button>Светлая кнопка</n-button>
</div>

Такой подход упрощает управление сложными интерфейсами с множественными темами.

Связывание CSS-переменных с пропсами компонентов

Некоторые компоненты Naive UI предоставляют прямой доступ к CSS-переменным через пропсы. Например, у n-button можно задать цвет через проп color, который автоматически обновляет соответствующую переменную:

<n-button color="#e6a23c">Оранжевая кнопка</n-button>

При использовании пропа color переменная --n-button-color будет установлена локально для этой кнопки, что упрощает кастомизацию без прямого написания CSS.

Интеграция CSS-переменных с SCSS и JavaScript

Для сложных интерфейсов часто используют SCSS вместе с CSS-переменными. Это позволяет создавать вычисляемые значения и повторно использовать их:

$primary-color: #409eff;

:root {
  --n-button-color: #{$primary-color};
  --n-button-hover-color: darken($primary-color, 10%);
}

Также переменные могут быть динамически обновлены через Jav * aScript:

document.documentElement.style.setProperty('--n-button-color', '#67c23a')

Такой подход позволяет объединять возможности препроцессоров и реактивность CSS-переменных для максимальной гибкости.

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

  • Всегда использовать глобальные переменные для базовой темы приложения.
  • Для локальных изменений компонентов применять переменные на уровне стиля или пропов.
  • Для динамических тем сочетать реактивные объекты Vue и CSS-переменные.
  • Для комплексных вычислений использовать SCSS или CSS-функции типа calc().
  • Проверять наследование переменных при вложенных компонентах, чтобы избежать неожиданных изменений стиля.

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

Оглавление