Use our Sass files to take advantage of variables, maps, mixins, and more.
It's highly recommended to avoid modifying core files, this means that you need to create your own stylesheet.
For Sass, it's recommended to create a new stylesheet that imports VUD so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:
If you downloaded our source files and you are not using a package manager, you need to manually setup something similar to that structure, keeping VUD's source files separate from your own.
Your-project/ ├── scss/ │ └── your-custom-styling.scss └── vud/ ├── js └── scss
In your sass file
your-custom-styling.scss, you need to import VUD's source Sass files. You have two options: include all VUD styles or choose only the parts you need.
// Option 1 - All VUD styles @import "~@vismaux/vud/src/scss/vud.light-dark.mode"; // Option 2 - Only the parts your need (eg. buttons) // 1. Include functions first @import "~@vismaux/vud/src/scss/utilities/functions"; // 2. Include any custom variable overrides here @import "../path-to-file/your-custom-vars.scss"; // 3. Include required VUD styles @import "~@vismaux/vud/src/scss/settings/all"; // 4. Include any VUD stylesheet needed @import "~@vismaux/vud/src/scss/base/all"; @import "~@vismaux/vud/src/scss/elements/buttons"; // or @import "~@vismaux/vud/src/scss/base/reboot"; @import "~@vismaux/vud/src/scss/base/typography"; @import "~@vismaux/vud/src/scss/base/local-fonts"; @import "~@vismaux/vud/src/scss/elements/buttons";
We don’t have a prebuilt example for using PurgeCSS with our library, but here are some helpful articles: