Sass is a meta-language whose purpose is to be processed into CSS. The file names are actually *.scss and can be compiled by a tool like Gulp or Webpack into a minified CSS file that can be read by any browser.

Sass helps with the task of writing CSS by allowing to divide the CSS code in different files, organize it a clean structure and it gives several tools as well as a more elegant and advanced syntax. Basically, it gives more power than flat CSS allows but it does not extend the CSS standard itself as it’s CSS that will be generated from the .scss files.

Object Oriented CSS

We have been using SCSS files for years and the way we write stylesheets has been evolving and continue to do so. Today we prefer a object-oriented coding paradigm which basically means we think of the HTML strcuture in term of objects or sections (and we try to reuse them as much as possible), so you have standard “objects” in HTML and then CSS classes that are applied to them and other CSS classes that can be added in order to slightly change their behaviour.

The objective is to be able to clearly understand while reading the HTML code and its CSS classes how it’s supposed to be displayed and to figure out very quickly where the CSS is defined (in which folder in the SCSS code structure).

This allows us to have a base of SCSS files that we can reuse through most projects, they contain :

  • resets : our own very simple reset that sits on top of Normalize.css, it allows to normalize styles between browsers to make sure they all behave the same.
  • project level configuration : main SCSS variables, colors, fonts, sizings
  • tools : media queries, clearfix, responsive classes
  • base elements : styling of HTML elements themselves
  • base object styles : wrapper, grid, lists, blocks,
    buttons, links
  • components : header, footer, sections, banners etc