While writing SCSS, we prefer to use a consistent architecture across all products.
This helps in organising SCSS files in a more semantic way.
base/
components/
layout/
pages/
themes/
abstracts/
vendors/
main.scssFolder structure at a glance
sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _placeholders.scss # Sass Placeholders
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| … # Etc.
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| … # Etc.
|
|– layout/
| |– _navigation.scss # Navigation
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| … # Etc.
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| … # Etc.
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| … # Etc.
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| … # Etc.
|
`– main.scss # Main Sass fileThe _ (underscore) is a partial for scss. That means the stylesheet its going to be imported (@import) to a main stylesheet i.e. main.scss. The advantage on using partials is that you can use many files to organize your code and everything will be compiled on a single file.
Base Folder
The base folder holds the boilerplate code for the project, such as reset files, typography rules, and standard styles for commonly used elements.
Layout Folder
The layout folder contains everything with respect to the layout of the application. It includes main parts of the website like _sidebar.scss, _header.scss, etc.
Component Folder
The component folder contains components. While the layout folder focuses on macros, the component folder focuses on widgets like _button.scss.
Pages Folder
The pages folder is used to hold page specific styles. Example - _home.scss
Themes Folder
This is project specific and might be non-existent in many projects. Themes folder is generally used to hold styles for applications that have multiple themes like admin, customer, agent etc.
Abstracts Folder
The abstracts/ folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here.
The rule of thumb for this folder is that it should not output a single line of CSS when compiled on its own. These are nothing but Sass helpers.
`_variables.scss`
`_mixins.scss`
`_functions.scss`
`_placeholders.scss`Vendors Folder
last but not least, most projects will have a vendors/ folder containing all the CSS files from external libraries and frameworks – Normalize, Bootstrap, jQueryUI
`_normalize.scss`
`_bootstrap.scss`Main File
The main file (usually labelled main.scss) should be the only Sass file from the whole code base not to begin with an underscore. This file should not contain anything but @import and comments.
Files should be imported according to the folder they live in, one after the other in the following order:
1. `abstracts/`
2. `vendors/`
3. `base/`
4. `layout/`
5. `components/`
6. `pages/`
7. `themes/`In order to preserve readability, the main file should respect these guidelines:
one file per
@import.one
@importper line.no new line between two imports from the same folder.
a new line after the last import from a folder.
file extensions and leading underscores omitted.
@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/placeholders";
@import "vendors/bootstrap";
@import "vendors/jquery-ui";
@import "base/reset";
@import "base/typography";
@import "layout/navigation";
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
@import "layout/forms";
@import "components/buttons";
@import "components/carousel";
@import "components/cover";
@import "components/dropdown";
@import "pages/home";
@import "pages/contact";
@import "themes/theme";
@import "themes/admin";