Vuetify-scss NPM

vuetify-scss

All of the Vuetify styles converted into Sass. No more Stylus! 🎉

Getting Started

Prerequisites

Of course, to use vuetify-scss you need to install Vuetify.

npm install vuetify --save-dev

Installing

To start using vuetify-scss you first need to install it using npm.

npm install vuetify-scss --save-dev

After installing, import vuetify-scss's .scss files into your own.

@import '~vuetify-scss';

Thats's it! Now you have all the fun of Vuetify with the awesomeness of Sass!

Usage

Changing variables

To change the default variables, simply define them before vuetify-scss is imported.

Example:

// Your own variables file where you override the
//  default Vuetify variables.
@import 'variables';

// Then import vuetify-scss.
@import '~vuetify-scss';

Vuetify Compatibility

To find out which version of vuetify-scss corresponds to which version of vuetify, see the compatibility table.

Added / Changed Variables

vuetify-scss has a few things that have been added or changed when compared to the styles in Vuetify. (such as variables and mixins)

Here is a list of the added / changed variables:

Variable	Default Value	Description
`$font-size-root`	`16px`	This is the value the `rem()` mixin is based on when converting pixel units to rem. Defines the HTML tag font-size.To change how the body font-size appears please refer to `$body-font-size`.
`$body-font-size`	`14px`	This variable dictates the body font size style.
`$heading-style-tags`	`false`	If true, also styles the `h1` - `h6` tags in addition to the `.display-1`, `.headline`, etc. tags.
`$values-use-rem`	`true`	If true, all measurements in the styles are converted to rem units, otherwise styles use px units.

Helper / Utility Mixins and Functions

vuetify-scss also adds some helper / utility mixins and functions that you can use to help when writing your own styles.

Mixin / Function	Example	Description
`rem(value)`	`font-size: rem(14px);`	Converts `value` into rem or rem/px units into px if `$values-use-rem` is false.Also accepts lists (i.e. `rem(6px 12px 24px 48px)`).
`get-color(palette, shade)`	`bg-color: get-color($blue, darken-1);`	Gets a color from a color palette.Also takes the Material Design form (i.e. `get-color(blue, 600)`).
`map-deep-get(map, keys...)`	`color: map-deep-get($material-light, text, primary);`	Gets a value from a nested map.
`breakpoint(breakpoint)`	`@include breakpoint(md-and-up) { /* styles */ }`	A shortcut mixin to have a style only apply to a certain breakpoint.