Sass Rules

File structure

• Categorized styles; making them easier to maintain

• 5-1 Pattern architecture; for clearer organization (based on the 7-1 Pattern)

• Clear delineation between grouped and associated rules

• Encourages common style, components and variable (inline with Atomic Design)

• Modular style management that facilitates Styleguide Driven Development

• Reusable approach

scss/                               # Import all ‘__[name].scss’ files except in abstract folder
|
|- abstracts/                   
|	|- _mixins.scss             # Scss Mixins
|	|- _variables.scss          # Scss Variables
|
|- base/
|	|- __base.scss              # Import all base .scss files
|	|- _fonts.scss              # Font Import
|	|- _reset.scss              # Custom Reset/Normalize
|	|- _typography.scss         # Typography Rules
|	…                           # Etc.
|
|- components/
|	|- __components.scss        # Import all components .scss files
|	|- _button.scss             # Button Styles
|	|- _input.scss              # Input Styles
|	|- _modal.scss              # Modal Styles
|	…	                    # Etc.
|
|- layouts/
|	|- __layouts.scss           # Import all layouts .scss files
|	|- _footer.scss             # Footer Styles
|	|- _main-navigation.scss    # Main Navigation Styles
|	…                           # Etc.
|
|- pages/
|	|- __pages.scss             # Import all layouts .scss files
|	|- _homepage.scss           # Footer Styles
|	|- _about-us.scss           # Main Navigation Styles
|	…                           # Etc.
|
|- vendor/
|	|- __vendor.scss            # Import vendor folders
|	|- bourbon/                 # Bourbon
|	|- fontawesome/             # Font Awesome
|	|- neat/                    # Bourbon Neat
|	|- normalize/               # Normalize
|	…                           # Etc.
|
`styles.scss                        # Main Scss File

Styles.scss

• Charset should be included

• Only directory files -dir.scss files should be imported

• Changes should not be made to this file

• Filename is always ‘styles’ as it is a compiled file containing multiple stylesheets

• All files except /styles.scss require an underscore at the beginning of each filename

@charset 'utf-8';

//Vendor
@import "vendor/__vendor";

//Base Styles
@import "base/__base";

//Components
@import "components/__components";

//Layout
@import "layouts/__layouts";

Use abstract folder

abstract folder contains functions, mixins, variables or other things that can be used repeatedly

this is how to use it

@use "../abstract/mixins";

.Footer {
  @include mixins.display(flex);
  @include mixins.justify-content(space-between);
}