Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Exemplary SASS Structure
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.