Code Formatting Sass

Coding Formatting Sass

Use the Same Rule of Thumb from CSS

1. Do not use tabs, use four spaces instead
2. Indentation should have 4 spaces
3. Do not leave space at end of line
4. Leave a space between name and start bracket
5. At end of file leave a new line
6. Leave a new line before each selector
7. One selector per line, one rule per line
8. List related properties together
9. Zero does not need unit
10. Avoid to use ID's

Class Building

1. Variablize all common numbers and colors
2. List @extends first
3. List regular styles next
4. List @includes after those

Nest If Necessary

1. Try to nest up most 4 levels deep (Furder nest can increase load time of generated CSS file on page and do not reusable code)
2. Try to keep a class under 50 lines to readability purposes

Project SASS Files Structure

1. Partials beggin with underscore (_) sign
2. Break into small files as it make sense
3. Use mapping to debug purposes
4. Do not commit CSS files

stylesheets/
    |
    |-- modules/                        # Common modules
    |   |-- _all.scss                   # Include to get all modules
    |   |-- _utility.scss               # Module name
    |   |-- _colors.scss                # Etc...
    |   ...
    |
    |-- pages/                          # Specific project pages styles
    |   |-- _index.scss
    |   |-- _login.scss
    |   ...
    |
    |-- partials/                       # Partials
    |   |-- _base.scss                  # 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
    |   ...
    |
    |-- _shame.scss                   # Store quick styles fixes to move to its right place another time
    |
    |-- main.scss                       # Primary Sass file

Main File (main.scss)

File with just imports without any css code

Import order

1. Vendor
2. Mixins
3. Partials
4. Modules
5. Pages

Base File (partial/_base.scss)

Content

1. All common variables
2. Frameworks utilities
3. Include your own mixins