This is the sass boilerplate using 7-1 architecture pattern that I used in my project.
For more information about this architecture pattern, you can read Guidelines
- Clone this repo to your project
$ git clone https://github.com/AsyrafHussin/sass-boilerplate.git- Update folder name from sass-boilerplate to sass
$ mv sass-boilerplate/sass sass && rm -rf sass-boilerplate- Remove .git and README.md file
$ rm -f sass/.git && rm -rf sass/README.mdsass/
├── abstracts/
│ ├── _abstracts.scss # Main abstracts file
│ ├── _functions.scss # Sass Functions
│ ├── _mixins.scss # Sass Mixins
│ ├── _placeholders.scss # Sass Pleholders
│ └── _variables.scss # Sass Variables
├── base/
│ ├── _base.scss # Main base file
│ ├── _animations.scss # Animations/Keyframes
│ ├── _reset.scss # Reset/normalize
│ └── _typography.scss # Typography rules
├── components/
│ ├── _components.scss # Main components file
│ └── _buttons.scss # Buttons
├── layout/
│ ├── _layout.scss # Main layout file
│ ├── _footer.scss # Footer
│ ├── _forms.scss # Forms
│ ├── _grid.scss # Grid
│ ├── _navbar.scss # Navbar
│ └── _sidebar.scss # Sidebar
├── pages/
│ ├── _pages.scss # Main pagesfile
│ └── _home.scss # Home specific styles
├── themes/
│ ├── _default.scss # Default theme
│ └── _themes.scss # Main themes file
├── vendors/
│ └── _vendors.scss # Main vendors file
├── _settings.scss # Sass Settings
└── app.scss # Main Sass file
- Using command line. How to intall?
- Compile
$ sass sass/:css/sass [sass-path]/:[css-path]/
For compile specific file you can use this command
sass sass/app.scss:css/app.css
- Compile with livereload
$ sass --watch sass/:css/- Compile with livereload and minify
$ sass --watch sass/:css/ --style compressed-
Using Laravel Mix
Frontend-Boilerplate for sass boilerplate + Laravel-mix
-
Using Gulp-Sass
-
Using Grunt-Sass
If you spot any errors, typos or missing information, please submit a pull request.