How to structure a Sass project
How to structure a Sass project :
Basic directory structure :
stylesheets/ | |-- modules/ # Common modules | |-- _all.scss # Include to get all modules | |-- _utility.scss # Module name | |-- _colors.scss # Etc... | ... | |-- partials/ # Partials | |-- _base.sass # imports for all mixins + global project variables | |-- _buttons.scss # buttons | |-- _figures.scss # figures | |-- _grids.scss # grids | |-- _typography.scss # typography | |-- _reset.scss # reset | ... | |-- vendor/ # CSS or Sass from other projects | |-- _colorpicker.scss | |-- _jquery.ui.core.scss | ... | `-- main.scss # primary Sass file
Primary stylesheet :
// Modules and Variables @import "partials/base"; // Partials @import "partials/reset"; @import "partials/typography"; @import "partials/buttons"; @import "partials/figures"; @import "partials/grids"; // ... // Third-party @import "vendor/colorpicker"; @import "vendor/jquery.ui.core";
As you can see this divides my project into three basic types of files. Modules, partials,
and vendored stylesheets.
Module :
The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations,
functions, and variables.