SASS variables

Vuetify uses SASS/SCSS to craft the style and appearance of all aspects of the framework.


Installation

Vuetify works out of the box without any additional compilers needing to be installed but does support advanced use-cases such as modifying the underlying variables of the framework. Vite provides built-in support for sass, less and stylus files without the need to install Vite-specific plugins for them; just the corresponding pre-processor itself.

To begin modifying Vuetify’s internal variables, install the sasspre-processor:

For additional details about css-pre-processors, please refer to the official vite page at: https://vitejs.dev/guide/features.html#css-pre-processorsor official vue-cli-page at: https://cli.vuejs.org/guide/css.html#pre-processors

Basic usage

Create a main.scss file in your src/styles directory and update the style import within your vuetify.js file:

src/styles/main.scss
@use 'vuetify' with (
  $variable: false,
);
src/plugins/vuetify.js
- import 'vuetify/styles'
+ import '@/styles/main.scss'

Within your style file, import the Vuetify styles and specify the variables you want to override, that’s it.

Component specific variables

Customising variables used in components is a bit more complex and requires the use of a special build plugin.

Follow the plugin setup guide from treeshakingthen add styles.configFile to the plugin options:

src/styles/settings.scss
@use 'vuetify/settings' with (
  $button-height: 40px,
);

configFile will be resolved relative to the project root, and loaded before each of vuetify’s stylesheets. If you were using the basic technique from above, make sure to remove it and switch back to import 'vuetify/styles'. You can keep main.scss for other style overrides but don’t do both or you’ll end up with duplicated styles.

Variable API

There are many SASS/SCSS variables that can be customized across the entire Vuetify framework. You can browse all the variables using the tool below:

Available SASS variables are located on each component’s API page.

VBtn SASS Variables

Usage in templates

You can access globaland per-component variables in Vue templates simply by importing the settings file:

Comp1.vue
<style lang="scss">
  @use './settings';

  .my-button {
    height: settings.$button-height;
  }
</style>

Keep in mind that to obtain settings from Vuetify, you must forward its variables from within your local stylesheet. In the following example we modify settings.scss to forward instead of use:

src/styles/settings.scss
- @use 'vuetify/settings' with (
+ @forward 'vuetify/settings' with (

Disabling utility classes

Utility classes are a powerful feature of Vuetify, but they can also be unnecessary for some projects. Each utility class is generated with a set of options that are defined here. Disable individual classes by setting their corresponding variable to false:

src/styles/settings.scss
@forward 'vuetify/settings' with (
  $utilities: (
    "align-content": false,
    "align-items": false,
    "align-self": false,
    "border-bottom": false,
    "border-end": false,
    "border-opacity": false,
    "border-start": false,
    "border-style": false,
    "border-top": false,
    "border": false,
    "display": false,
    "flex-direction": false,
    "flex-grow": false,
    "flex-shrink": false,
    "flex-wrap": false,
    "flex": false,
    "float-ltr": false,
    "float-rtl": false,
    "float": false,
    "font-italic": false,
    "font-weight": false,
    "justify-content": false,
    "margin-bottom": false,
    "margin-end": false,
    "margin-left": false,
    "margin-right": false,
    "margin-start": false,
    "margin-top": false,
    "margin-x": false,
    "margin-y": false,
    "margin": false,
    "negative-margin-bottom": false,
    "negative-margin-end": false,
    "negative-margin-left": false,
    "negative-margin-right": false,
    "negative-margin-start": false,
    "negative-margin-top": false,
    "negative-margin-x": false,
    "negative-margin-y": false,
    "negative-margin": false,
    "order": false,
    "overflow-wrap": false,
    "overflow-x": false,
    "overflow-y": false,
    "overflow": false,
    "padding-bottom": false,
    "padding-end": false,
    "padding-left": false,
    "padding-right": false,
    "padding-start": false,
    "padding-top": false,
    "padding-x": false,
    "padding-y": false,
    "padding": false,
    "rounded-bottom-end": false,
    "rounded-bottom-start": false,
    "rounded-bottom": false,
    "rounded-end": false,
    "rounded-start": false,
    "rounded-top-end": false,
    "rounded-top-start": false,
    "rounded-top": false,
    "rounded": false,
    "text-align": false,
    "text-decoration": false,
    "text-mono": false,
    "text-opacity": false,
    "text-overflow": false,
    "text-transform": false,
    "typography": false,
    "white-space": false,
  ),
);

To disable all utility classes, set the entire $utilities variable to false:

src/styles/settings.scss
@forward 'vuetify/settings' with (
  $utilities: false,
);

Disabling color packs

Color packs are handy for quickly applying a color to a component but mostly unused in production. To disable them, set the $color-pack variable to false:

src/styles/settings.scss
@forward 'vuetify/settings' with (
  $color-pack: false,
);

Caveats

When using sass variables, there are a few considerations to be aware of.

Duplicated CSS

Placing actual styles or importing a regular stylesheet into the settings file will cause them to be duplicated everywhere the file is imported. Only put variables, mixins, and functions in the settings file, styles should be placed in the main stylesheet or loaded another way.

Build performance

Vuetify loads precompiled CSS by default, enabling variable customisation will switch to the base SASS files instead which must be recompiled with your project. This can be a performance hit if you’re using more than a few vuetify components, and also forces you to use the same SASS compiler version as us.

sass-loader with api: 'modern'

You might have to write a custom importer plugin to load the settings file.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub