Quasar SASS/SCSS переменные

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

Подключение SASS/SCSS в Quasar

Для корректного использования SCSS необходимо убедиться, что проект поддерживает нужные загрузчики:

npm install -D sass sass-loader

После установки загрузчиков, Quasar автоматически сможет обрабатывать файлы .scss и .sass. Все стили, подключенные через <style lang="scss">, будут поддерживать возможности SASS, включая переменные, миксины и вложенные селекторы.

Глобальные SASS/SCSS переменные

Quasar предоставляет файл для глобальных переменных, который используется для переопределения стандартных значений. Обычно это файл src/css/quasar.variables.scss. Пример структуры файла:

// Основные цвета
$primary: #1976d2;
$secondary: #26a69a;
$accent: #9c27b0;
$dark: #1d1d1d;

// Настройка отступов
$btn-padding: 12px 24px;

// Размеры шрифтов
$font-size-base: 16px;
$font-size-h1: 2rem;
$font-size-h2: 1.75rem;

Эти переменные автоматически подхватываются всеми компонентами Quasar. Любое переопределение значения $primary мгновенно меняет основной цвет всего приложения.

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

Quasar поддерживает динамическое использование светлой и тёмной темы. Для этого используется ключ quasar.conf.js:

cssAddon: true,
framework: {
  config: {
    brand: {
      primary: '#1976d2',
      secondary: '#26a69a',
      accent: '#9c27b0',
      dark: '#1d1d1d',
      positive: '#21ba45',
      negative: '#c10015',
      info: '#31ccec',
      warning: '#f2c037'
    }
  }
}

Эти значения автоматически связываются с переменными SCSS, например $primary и $secondary. При использовании темизации через SASS, можно создавать отдельные наборы переменных для светлой и тёмной темы и подгружать их в зависимости от текущей темы:

@use 'src/css/themes/light' as *;
@use 'src/css/themes/dark' as *;

Миксины и функции для SASS/SCSS

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

@use 'quasar/dist/quasar.sass' as *;

// Пример использования миксина для кнопки
.btn-custom {
  @include q-btn($color: $primary, $padding: $btn-padding);
}

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

Локальные переменные для компонентов

Помимо глобальных переменных, для отдельных компонентов можно создавать локальные SCSS-файлы. Это удобно для кастомизации отдельных элементов:

<template>
  <q-btn label="Нажми меня" class="btn-custom" />
</template>

<style lang="scss" scoped>
.btn-custom {
  $btn-color: $accent;
  background-color: $btn-color;
  padding: $btn-padding;
}
</style>

Локальные переменные не затрагивают глобальные настройки и позволяют делать компонент максимально независимым в стилизации.

Динамическая смена переменных через JavaScript

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

:root {
  --primary-color: #1976d2;
}

$primary: var(--primary-color);

В JavaScript можно менять значение CSS-переменной:

document.documentElement.style.setProperty('--primary-color', '#ff5722');

Все компоненты, использующие $primary, автоматически обновят свой стиль, что особенно полезно для динамических тем и кастомизации под пользователя.

Организация структуры SASS/SCSS файлов в проекте Quasar

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

src/css/
├─ quasar.variables.scss  // Глобальные переменные
├─ themes/
│  ├─ light.scss          // Светлая тема
│  └─ dark.scss           // Тёмная тема
├─ components/
│  ├─ button.scss
│  └─ card.scss
└─ utils/
   ├─ mixins.scss
   └─ functions.scss

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