Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Exemplary SASS Structure

View gist:8cb7a45db2803d9cdaec
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
assets/css/
|
|-- utility/ # Utility SASS that is not outputted
| |-- _mixins.scss # Declarations, Functions, Generic Variables (think brand colors), Extends
| |-- _utility.scss
| |-- _extends.scss
| |-- _colors.scss
| ...
|
|-- base/ # Generic Styles that are not attached to specific modules
| |-- _reset.scss # reset / normalize
| |-- _helper.scss # helper classes
| |-- _print.scss # print styles
| |-- _typography.scss # typography
| ...
|
|-- layout/ # Layout Styles
| |-- _grid.scss # Grid
| |-- _header.scss # Global Layout Components like Header and Footer
| |-- _footer.scss
| ...
|
|-- pages/ # Page specific styles
| |-- _individual.scss # css for dedicated pages
| ...
|
|-- components/ # Typography and actual modules
| |-- _buttons.scss # buttons
| |-- _figures.scss # figures
| |-- _forms.scss # forms
| |-- _module(x).scss # modules
| ...
|
|-- vendor/ # CSS or Sass from other projects
| |-- _colorpicker.scss
| |-- _jquery.ui.core.scss
| ...
|
`-- main.scss # primary Sass file where everything is imported to
`-- page(x).scss # Dedicated CSS importing dedicated styles like _individual.scss
 
 
In short:
Utility, Base and Layout are generic, global styles. (Basically we already do this, when we link to resets, grid frameworksm etc.). We just adapt it to the sass/scss workflow.
Components and Vendor are specific styles.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.