SASS переменные темизации

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

Подключение SASS в проект Quasar

Quasar использует SASS/SCSS как основной препроцессор стилей. Для работы с SASS переменными необходимо убедиться, что проект настроен на поддержку SCSS. В стандартном проекте Quasar это выполняется автоматически, но можно проверить наличие пакета:

npm install -D sass sass-loader

В quasar.config.js в разделе css указываются файлы SCSS для глобального подключения:

css: [
  'app.scss'
]

Файл app.scss может содержать переопределение переменных, импорт стандартных переменных Quasar и кастомные настройки:

@import 'quasar/src/css/variables.sass';
$primary: #1e88e5;
$secondary: #ff4081;

Основные категории SASS переменных Quasar

Quasar структурирует SASS переменные по нескольким группам:

  1. Цвета Основные переменные для цветов:

    • $primary, $secondary, $accent — ключевые цвета темы.
    • $positive, $negative, $info, $warning — системные цвета уведомлений и состояния.
    • $dark и $light — базовые цвета фона для темных и светлых тем.

  2. Типографика Управление шрифтами и размерами текста:

    • $font-family
    • $font-size-root
    • $heading-font-weight
    • $body-line-height

  3. Отступы и размеры Контроль над базовыми интервалами и размерами элементов:

    • $border-radius
    • $padding-xs, $padding-sm, $padding-md, $padding-lg
    • $margin-xs, $margin-sm, $margin-md, $margin-lg

  4. Тени и границы Настройка визуальной глубины элементов:

    • $box-shadow-1, $box-shadow-2, $box-shadow-3
    • $border-width
    • $border-color

  5. Темизация компонентов Переменные для компонентов Quasar:

    • q-btn использует $btn-padding, $btn-border-radius, $btn-color
    • q-card использует $card-padding, $card-bg-color, $card-border-radius

Создание светлой и темной темы

Quasar поддерживает динамическое переключение тем, используя отдельные наборы SASS переменных. Например:

// Светлая тема
$primary: #1976d2;
$secondary: #ff4081;
$background: #ffffff;

// Темная тема
$dark-primary: #2196f3;
$dark-secondary: #ff79b0;
$dark-background: #121212;

В quasar.config.js подключение темы осуществляется через:

framework: {
  config: {
    dark: 'auto', // 'auto', true, false
  }
}

Далее приложение может динамически менять тему через API:

import { Dark } from 'quasar';

Dark.set(true); // Включение темной темы
Dark.toggle();  // Переключение

Переопределение переменных для компонентов

Каждый компонент Quasar имеет набор SASS переменных, которые можно переопределять глобально. Например, для кнопок:

$btn-padding: 0.75rem 1.5rem;
$btn-border-radius: 12px;
$btn-font-size: 16px;
$btn-primary-color: #1e88e5;

Эти переменные автоматически применяются ко всем кнопкам в приложении без необходимости вручную менять стили каждого экземпляра q-btn.

Для карточек:

$card-padding: 1rem;
$card-border-radius: 16px;
$card-bg-color: #f5f5f5;

Импорт и структура кастомных SASS файлов

Рекомендуется создавать отдельные файлы для переменных и импортировать их в основной SCSS файл:

src/css/
 ├─ variables/
 │   ├─ colors.scss
 │   ├─ typography.scss
 │   └─ components.scss
 └─ app.scss

В app.scss:

@import './variables/colors.scss';
@import './variables/typography.scss';
@import './variables/components.scss';

Такой подход облегчает поддержку проекта, упрощает масштабирование и внедрение новых тем.

Использование SASS функций и миксинов

Quasar предоставляет набор SASS миксинов для работы с цветами и границами:

  • color-variant($color, $modifier) — генерация оттенков.
  • rgba($color, $alpha) — прозрачность цвета.
  • shadow($level) — добавление стандартной тени.

Пример использования:

.btn-custom {
  background-color: color-variant($primary, -10%);
  box-shadow: shadow(2);
}

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

  • Все ключевые цвета и размеры держать в переменных, чтобы упростить изменение темы.
  • Использовать отдельные файлы для разных категорий переменных.
  • Для темной и светлой темы создавать отдельные наборы переменных и подключать через Dark API.
  • Использовать миксины и функции Quasar для консистентности стилей между компонентами.

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

Оглавление