Sass Template - v2.0

This is a template for a Sass project. Built with Vite.

How to use it

1. Just download the sass folder
2. Include it in your project.
3. Start using Sass Template

Folder structure

sass/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   ├── _functions.scss
│   ├── _placeholders.scss
│   ├── _index.scss
├── base/
│   ├── _root.scss
│   ├── _reset.scss
│   ├── _global.scss
│   ├── _index.scss
├── pages/
│   ├── _home.scss
│   ├── _about.scss
│   ├── ...
│   ├── _index.scss
├── layouts/
│   ├── _header.scss
│   ├── _footer.scss
│   ├── _grid.scss
│   ├── ...
│   ├── _index.scss
├── components/
│   ├── _buttons.scss
│   ├── _card.scss
│   ├── ...
│   ├── _index.scss
├── utilities/
│   ├── _accessibility.scss
│   ├── _helpers.scss
│   ├── _shame.scss
│   ├── ...
│   ├── _index.scss
├── style.scss

The way files are ordered is important since it defines which style should override the other. So, I made this diagram to better illustrate it:

Useful Links

• Vite Documentation
• Sass Documentation
• Sass Guidelines