Sass File Structure
sass/ | |– utilities | |– _variables.scss // Sass Variables | |– _functions.scss // Sass Functions | |– _mixins.scss // Sass Mixins | |– base/ | |– _reset.scss // Reset/normalize | |– _typography.scss // Typography rules | |– components/ (or modules/) | |– _buttons.scss // Buttons | |– _carousel.scss // Carousel | |– _slider.scss // Slider | |– layout/ | |– _navigation.scss // Navigation | |– _grid.scss // Grid system | |– _header.scss // Header | |– _footer.scss // Footer | |– _sidebar.scss // Sidebar | |– _forms.scss // Forms | |– pages/ | |– _home.scss // Home specific styles | |– _about.scss // About specific styles | |– _contact.scss // Contact specific styles | |– themes/ | |– _theme.scss // Default theme | |– _admin.scss // Admin theme | |– vendors/ | |– _bootstrap.scss // Bootstrap | |– _jquery-ui.scss // jQuery UI | `– main.scss // Main Sass file
Utilities are reserved for mixins, variables, and functions that does not output any CSS when compiled.
Reference: Structuring your Sass Projects
Published by Kerry Severin | #KmsMind