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!