vuetify-scss

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

• Getting Started
  • Prerequisites
  • Installing
• Usage
  • Changing variables
  • Vuetify Compatibility
  • Added / Changed Variables
  • Helper / Utility Mixins and Functions
• Info
  • Changes
  • Versioning
  • Authors
  • License
  • Acknowledgments

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.

Info

Changes

To see a list of each version and it's changes, check out the releases page.

Versioning

This project uses the Angular commit convention and is automatically generated by conventional-changelog.

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Neil Smith - Creator

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

All thanks goes to Vuetify for their amazing framework!