In this folder, we say 'rule = var'

All layouts are centralized by _layouts.scss

Layouts are major sections of the page (header, footer, sidebar)

Id's use is tolerable here.

All modules are centralized by _modules.scss

Modules are autonomous sections in a page.

Modules have to be modular and reusable :

header .block-list { ... }  Bad idea =(
.block-list-fit { ... }     Good idea =)

Rules for same modules have to share same base name :

.btn {}
.btn-search {}
.btn-small {}
.btn-large {}

Redefines base, layout, module and state rules to switch between themes

This way :

  //Default rules
  body {
      font-family: "Roboto", sans-serif;
  }

  header {
      background-color: #33F;
      color: #A66105;
  }

  .block-list > li{
      border: 0 dashed #00D;
  }

  //Overwritten rules
  .theme-ocean {
    font-family: "Roboto", sans-serif;

    .theme-ocean header {
        background-color: #33F;
        color: #A66105;
    }

    .theme-ocean .block-list > li{
        border: 0 dashed #00D;
    }
  }

This way, you can import all themes at the same time.

You just have to add the theme root class to apply it dynamically, using javascript for example.

Base file imports vars and defines rules for html tags

Reset is a way of cleaning the styling differences between browsers in order to have a consistent baseline

This file defines the states of elements (like inputs, divs)

This is the only place where !important is good to use

It defines a final state of an element, therefore, there should not be two states for an element

States can be :

• class names
• pseudo-class
• media queries

Primarily used by JavaScript

Class names have to say what is the intention of the rule :

.is-loading {}
.is-collapsed {}

When the state relates to a module

.is-btn-active {}
.is-btn-disabled {}

This is the only place where we should define typos

Be careful, the given path must be relative to main.scss

Vars are centralized by _all.scss

This is also the place for mixins

In the rush of development project we should allow some shameful non SMASASS code

It has to be documented !!

• What does it refer ?
• Why (so much hate) ?
• How does it work ?
• How would it be cleanable later ?

Of course this needs to be cleaned regularly

The main file imports everything in this order :

• Third-party styles
• Reset
• Base
• Layouts
• Modules
• States
• Themes
• Shame

This is the only file that compass compiles.