Skip to content

Latest commit

 

History

History
46 lines (37 loc) · 1.8 KB

scss-coding-guidelines.md

File metadata and controls

46 lines (37 loc) · 1.8 KB
Raw

SCSS coding guidelines

Directory structure

The aim of the defined directory structure is to:

  • Split code in smaller modules
  • Reduce SASS compilation time
app/assets/stylesheets/
|
|-- mixins/                     # Variables, mixins and extend "placeholder selectors" (%)
|   |-- _all.scss               # Rule: Files under this folder can NOT output CSS
|   |-- _customizations.scss
|   |-- _media-queries.scss
|   ...
|
|-- partials                    # CSS definitions that are used across multiple views
|   |-- _grid.scss              # Outputs CSS
|   |-- _map.scss
|   |...
|
|-- views                       # CSS definitions specific to one view
|   |-- _listings.scss
|   |-- _people.scss
|   |...
|
`-- index.scss                  # File that includes all the other SCSS files
                                # Use Sprocket `//= require` instead of `@import` to reduce
                                # compile time

Rules:

  • Files under mixins folder should NEVER output any CSS (i.e. they can contain only variables, mixins etc.)
  • Files under partials and views should NEVER @import files under partials and views (otherwise the CSS is compiled and written to the output twice)
  • Files under partials and views can freely @import as many files under mixins as they want.
  • Never @import "compass" instead, import the Compass mixins you need (e.g. @import "compass/css3/border-radius")

Additional reading:

PS. The structure of SASS files in this project is currently not according to what is written here. However, we're working on it and improving step by step.