7.1 Sass

7.1.1 What?

  • CSS is a style-sheet language
  • Sass is a CSS pre-processor–that is, another style-sheet language that writes CSS

7.1.2 Why?

Writing CSS …

  • Can be tedious and/or repetitive. Multiple rules might share the same properties. Multiple classes could share common rules. CSS might require. Sass has tools to keep code DRY.
  • Cannot compute. Sometimes simple math operations makes writing CSS better.

providing access to variables, mathematical operators, functions and loops, thereby reducing the code complexity and extending the possibilitie

Read Sass’s product overview for more details.

7.1.3 How?

  • Variables. Avoid repetition of repeated properties. Define once. Refer often.
  • Partial and modules. Split monolithic CSS stylesheets into composable modules.
  • Mixins and functions. Write CSS by copy-paste or computation.
  • Inheritance. Like in OOP, child classes inherit from, and extend, parent classes.
  • Flow control. Rather than manually craft a class for each state, compose a class that is state-dependent.
  • Nesting code. Conveniently structured like HTML’s hierarchy but translates to standard CSS.