CSS переменные в Quasar

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

Подключение и структура CSS-переменных

В Quasar большинство базовых переменных находятся в файле variables.scss, который можно подключить через настройки сборщика или в quasar.config.js. Примеры ключевых переменных:

$primary: #1976d2;
$secondary: #26a69a;
$accent: #9c27b0;
$dark: #1d1d1d;

Quasar автоматически генерирует соответствующие CSS-переменные для этих SCSS-переменных, которые можно использовать в любом компоненте:

background-color: var(--q-primary);
color: var(--q-secondary);

Важно: переменные с префиксом --q- являются стандартом Quasar и доступны глобально, что позволяет единообразно применять цвета и стили в приложении.

Глобальные переменные темы

Quasar поддерживает систему тем, где глобальные переменные можно переопределять для светлой и тёмной темы. Конфигурация выполняется в quasar.config.js:

framework: {
  config: {
    brand: {
      primary: '#1976d2',
      secondary: '#26a69a',
      accent: '#9c27b0',
      dark: '#1d1d1d',
    }
  }
}

Quasar автоматически создаёт CSS-переменные вида:

:root {
  --q-primary: #1976d2;
  --q-secondary: #26a69a;
  --q-accent: #9c27b0;
  --q-dark: #1d1d1d;
}

Для тёмной темы переменные можно динамически менять через q-dark класс на элементе body:

body.q-dark {
  --q-primary: #2196f3;
  --q-secondary: #80cbc4;
}

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

В компонентах Quasar CSS-переменные можно использовать как напрямую в стилях, так и через style атрибут:

<template>
  <q-btn label="Кнопка" :style="{ backgroundColor: 'var(--q-primary)', color: 'var(--q-white)' }" />
</template>

В SCSS файлах компонентов можно комбинировать переменные Quasar с кастомными:

.my-card {
  background-color: var(--q-secondary);
  border: 1px solid var(--q-accent);
}

Для локальных переменных компонента поддерживается синтаксис:

:root {
  --card-padding: 16px;
}

.my-card {
  padding: var(--card-padding);
}

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

Quasar позволяет переключать светлую и тёмную тему на лету. Для этого достаточно добавить или удалить класс q-dark у тега body:

this.$q.dark.toggle();

После переключения все CSS-переменные автоматически обновляются, благодаря чему компоненты мгновенно получают новые цвета без перезагрузки страницы.

Кастомизация через SCSS

Для расширенной настройки можно создать свой файл variables.scss и импортировать его в проект:

@import 'src/css/variables.scss';

body {
  background-color: var(--q-background);
  color: var(--q-dark);
}

Quasar автоматически поддерживает пересборку переменных при изменении значений SCSS, что особенно удобно для разработки с горячей перезагрузкой (hot-reload).

Советы по использованию

  1. Использовать глобальные переменные для цветов бренда — это упрощает поддержку и изменение темы.
  2. Локальные CSS-переменные для уникальных компонентов — позволяют создавать переиспользуемые стили без влияния на глобальную тему.
  3. Динамическая смена темы через q-dark — оптимизирует работу с тёмными и светлыми режимами без переписывания стилей.
  4. Комбинировать SCSS и CSS-переменные — для сложных кастомных эффектов и адаптивных стилей.

Примеры применения

Пример светлой и тёмной кнопки:

<q-btn
  label="Светлая"
  class="q-mr-sm"
  :style="{ backgroundColor: 'var(--q-primary)', color: 'var(--q-white)' }"
/>
<q-btn
  label="Тёмная"
  class="q-dark"
  :style="{ backgroundColor: 'var(--q-primary)', color: 'var(--q-white)' }"
/>

Пример динамической смены темы для всего приложения:

<template>
  <q-page>
    <q-btn label="Переключить тему" @click="$q.dark.toggle()" />
  </q-page>
</template>

Quasar автоматически применяет новые переменные ко всем компонентам, обеспечивая единообразный внешний вид.

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

Оглавление