Vuetify Scss Save
The styles for the Vue.js frontend framework converted to SCSS.
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. |
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!
Open Source Agenda Badge
