SASS переменные

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

SASS-переменные в Vuetify определены в виде SCSS-файлов, которые подключаются в процессе сборки проекта через Webpack или Vite. Основная идея заключается в том, чтобы задать свои значения до импорта стилей Vuetify, чтобы они перекрыли стандартные.

Подключение и переопределение переменных

Для переопределения переменных необходимо:

  1. Создать файл variables.scss.
  2. Определить в нём нужные переменные.
  3. Подключить этот файл перед импортом основного стиля Vuetify.

Пример структуры:

// variables.scss
$body-font-family: 'Roboto', sans-serif;
$btn-border-radius: 8px;
$primary: #1e88e5;
$secondary: #ff4081;
// main.js или main.ts
import { createApp } from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
import './styles/variables.scss';

createApp(App)
  .use(vuetify)
  .mount('#app');

Важно, чтобы переменные определялись до импорта Vuetify, иначе значения по умолчанию будут использованы.

Основные группы SASS-переменных

  1. Цветовые палитры

Vuetify использует несколько ключевых переменных для основных цветов:

$primary
$secondary
$success
$error
$warning
$info

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

$primary-lighten-1
$primary-darken-2
  1. Типографика

Управление шрифтами и размерами:

$body-font-family
$heading-font-family
$font-size-root
$line-height
$font-weight-regular
$font-weight-bold

Например:

$body-font-family: 'Open Sans', sans-serif;
$font-size-root: 16px;
  1. Компоненты и их размеры

Каждый компонент Vuetify имеет набор переменных для настройки:

$btn-border-radius
$btn-height
$card-padding
$card-border-radius
$input-height

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

  1. Сетки и отступы

Vuetify использует систему сеток и отступов через переменные:

$grid-gutter-width
$grid-columns
$grid-breakpoints
$container-max-widths

Например, изменение ширины колонок сетки:

$grid-gutter-width: 24px;
$container-max-widths: (
  xs: 540px,
  sm: 720px,
  md: 960px,
  lg: 1140px,
  xl: 1320px
);

Организация пользовательских переменных

Для крупных проектов рекомендуется:

  • Создать отдельный файл variables.scss.
  • Группировать переменные по типу: цвета, типографика, компоненты, сетка.
  • Использовать карты SCSS для цветовых схем:
$colors: (
  primary: #1e88e5,
  secondary: #ff4081,
  success: #4caf50,
  error: #f44336
);

Это упрощает использование и позволяет легко генерировать оттенки и модификаторы через функции SCSS.

Динамическое изменение темы

Vuetify позволяет использовать темизацию на основе SASS-переменных. При использовании кастомных переменных с $light-theme и $dark-theme можно задать разные палитры для светлого и тёмного режимов:

$light-theme: (
  primary: #1e88e5,
  secondary: #ff4081,
  background: #ffffff
);

$dark-theme: (
  primary: #90caf9,
  secondary: #f48fb1,
  background: #121212
);

Советы по работе с SASS-переменными

  • Всегда проверять актуальные переменные в официальных SCSS-файлах Vuetify, чтобы избежать конфликтов.
  • Не изменять переменные напрямую в node_modules; лучше переопределять их в собственных SCSS-файлах.
  • Использовать SCSS-функции и миксины Vuetify для генерации оттенков и прозрачностей, например lighten($primary, 20%).
  • Для больших проектов можно создавать модули переменных, импортируя только нужные части.

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

Оглавление