Skip to main content

​
SASS Variables

Vuetify provides a comprehensive set of SASS variables that allow you to customize the framework’s appearance at build time. These variables control everything from spacing and typography to borders and breakpoints.

​
Getting Started

To customize SASS variables, create a SASS file that overrides the default values before importing Vuetify’s main stylesheet: 
// src/styles/settings.scss
@use 'vuetify/settings' with (
  $body-font-family: 'Inter, sans-serif',
  $border-radius-root: 8px,
  $spacer: 8px
);
Then import this file in your main entry point before Vuetify: 
// main.js
import './styles/settings.scss'
import 'vuetify/styles'

​
Core Variables

​
Typography

Control font families, sizes, and text styles: 
$body-font-family: var(--v-font-body, 'Roboto', sans-serif) !default;
$heading-font-family: var(--v-font-heading, #{$body-font-family}) !default;
$font-size-root: 1rem !default;
$line-height-root: 1.5 !default;

​
Spacing

Vuetify uses a 4px base spacer with 16 steps by default: 
$spacer: 4px !default;
$spacers-steps: 16 !default;

// Generates: 0, 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px...
To use an 8px spacing system:
@use 'vuetify/settings' with (
  $spacer: 8px,
  $spacers-steps: 12
);
This generates utility classes like ma-1 (8px), ma-2 (16px), ma-3 (24px), etc.

​
Borders

Customize border styles, widths, and radii: 
$border-color-root: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
$border-radius-root: 4px !default;
$border-style-root: solid !default;
$border-width-root: thin !default;

​
Opacity & States

Control opacity levels for interactive states: 
$opacities: (
  hover: var(--v-hover-opacity),
  focus: var(--v-focus-opacity),
  selected: var(--v-selected-opacity),
  activated: var(--v-activated-opacity),
  pressed: var(--v-pressed-opacity),
  dragged: var(--v-dragged-opacity),
  0: 0,
  10: .1,
  20: .2,
  // ... up to 100
) !default;

$states: (
  'hover': var(--v-hover-opacity),
  'focus': var(--v-focus-opacity),
  'selected': var(--v-selected-opacity),
  'activated': var(--v-activated-opacity),
  'pressed': var(--v-pressed-opacity),
  'dragged': var(--v-dragged-opacity)
) !default;

​
Breakpoints & Grid

​
Responsive Breakpoints

Define custom breakpoint values: 
$grid-breakpoints: (
  'xs': 0,
  'sm': 600px,
  'md': 840px,
  'lg': 1145px,
  'xl': 1545px,
  'xxl': 2138px,
) !default;

@use 'vuetify/settings' with (
  $grid-breakpoints: (
    'xs': 0,
    'sm': 640px,
    'md': 768px,
    'lg': 1024px,
    'xl': 1280px,
    'xxl': 1536px
  )
);
This aligns with Tailwind CSS breakpoints for easier migration.

​
Grid System

Customize grid behavior: 
$grid-gutter: $spacer * 6 !default;        // 24px
$grid-columns: 12 !default;
$container-padding-x: $spacer * 4 !default; // 16px

$grid-density: (
  'default': 0,
  'comfortable': -1,
  'compact': -2
) !default;

​
Transitions & Animations

Control timing functions and durations: 
$standard-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
$decelerated-easing: cubic-bezier(0.0, 0, 0.2, 1) !default;  // Entering
$accelerated-easing: cubic-bezier(0.4, 0, 1, 1) !default;     // Leaving

​
Component Sizing

Define size scales for components: 
$sizes: (
  'x-small',
  'small',
  'default',
  'large',
  'x-large'
) !default;

$size-scale: $spacer * 2 !default;  // 8px

$size-scales: (
  'x-small': -2,   // -16px
  'small': -1,     // -8px
  'default': 0,    // 0px
  'large': 1,      // +8px
  'x-large': 2     // +16px
) !default;

​
Elevations

Customize shadow definitions: 
$shadow-key-color: rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)) !default;
$shadow-ambient-color: rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15)) !default;

$shadow-key: (
  0: (0px 0px 0px 0px $shadow-key-color),
  1: (0px 1px 2px 0px $shadow-key-color),
  2: (0px 1px 2px 0px $shadow-key-color),
  3: (0px 1px 3px 0px $shadow-key-color),
  4: (0px 2px 3px 0px $shadow-key-color),
  5: (0px 4px 4px 0px $shadow-key-color)
) !default;

​
Complete Example

Here’s a comprehensive example of customizing multiple variables: 
// src/styles/settings.scss
@use 'vuetify/settings' with (
  // Typography
  $body-font-family: 'Inter, system-ui, sans-serif',
  $heading-font-family: 'Poppins, sans-serif',
  $font-size-root: 1rem,
  
  // Spacing
  $spacer: 8px,
  $spacers-steps: 12,
  
  // Borders
  $border-radius-root: 8px,
  $border-width-root: 1px,
  
  // Transitions
  $transition-duration-root: 0.2s,
  
  // Breakpoints
  $grid-breakpoints: (
    'xs': 0,
    'sm': 640px,
    'md': 768px,
    'lg': 1024px,
    'xl': 1280px,
    'xxl': 1536px
  ),
  
  // Grid
  $grid-gutter: 32px,
  $container-padding-x: 24px
);

​
Variable Reference

All SASS variables are located in /packages/vuetify/src/styles/settings/:
  • _variables.scss - Core variables (spacing, typography, borders)
  • _colors.scss - Material color palette
  • _elevations.scss - Shadow definitions
  • _utilities.scss - Utility class configuration
SASS variables are evaluated at build time. For runtime customization, use theme configuration instead.

Build docs developers (and LLMs) love

Get started for freeTalk to us