Writing and maintaining Cascading Style Sheets (CSS) can be very rewarding but for modern responsive applications it can easily turn out to be a frustrating and confusing process.
Such are the demands of websites today that stylesheets can quickly become bloated and complicated, with more plot twists that a bestselling novel.
CSS Preprocessors
This is where a CSS preprocessor can make life easier. CSS preprocessors are programs that generate CSS from their own syntax. There are several CSS preprocessors available, and most will add some features that are not available in pure CSS, this is where their true value lies.
Sass
Enter Sass (Syntactically Awesome Stylesheets).
Sass is a prominent CSS preprocessor and extension language; it introduces exciting new features to the CSS language including:
- variables,
- nesting,
- mixins,
- functions,
- inheritance and more.
Furthermore, Sass supports an architecture that offers a welcome structure and modularity to stylesheets
Sass or SCSS?
Perhaps confusingly Sass supports two syntaxes; the original Sass syntax with a file extension of .sass and the newer SCSS syntax with a file extension of…you guessed it .scss.
The original Sass syntax uses white spacing and indentation in place of the curly braces and semi-colons found in CSS. Whereas the newer SCSS syntax follows the same rules as CSS syntax making it easier to learn and meaning that all valid CSS is valid SCSS. Not surprisingly SCSS has become the most popular choice among developers.
About that Architecture
As mentioned, one of the big advantages of Sass is the capacity to write partials. Sass partials help to divide stylesheets into separate smaller files – each partial is a single file and combined they form the ultimate CSS stylesheet.
Not only does this make the code more maintainable – no more scrolling to the depths of a CSS file for that errant margin, it also helps to modularize the CSS, separating buttons from headers, and components from layout etc.
The 7-1 Pattern
There are different approaches, but many subscribe to the 7-1 pattern for the architecture. This comprises a main Sass folder containing 7 sub-folders for the partials:
- Base/
- Components/
- Layout/
- Pages/
- Themes/
- Abstracts/
- Vendors/
and one main sass file (main.scss) which imports all the partials into the final compiled CSS stylesheet.
Typically, the Layout folder will contain partials for header, footer and navigation etc. Whereas the Components folder will contain partials like button.scss and form.scss and so on.
Features Worth Noting
Any developer familiar with programming will appreciate the value of introducing features like variables, nesting, and functions to CSS. But it is worth noting that the objective of Sass is not to turn CSS into a full-blown programming language, it aims simply to overcome some of the shortfalls.
Variables
Variables provide a great example of what a little bit of functionality can do. A variable in simple terms is an alias for a value:
The variable below ($color-blue) is an alias for the colour (#83D0F5)
$color-blue: #83D0F5;
So now every time that colour is used, instead of writing
color: #83D0F5;
the variable name is used instead:
color: $color-blue;
At first this might seem to have little benefit, until we consider that the colour might need to change for some reason. Without the variable we would have to go through the entire CSS stylesheet to find and update every instance, but using a variable means the only change required is to the original variable:
From
$color-blue: #83D0F5;
To
$color-blue: #0094FF;
Now everywhere that uses color: $color-blue; will automatically pick up the change.
In Summary
This article has offered a brief introduction to CSS preprocessors such as Sass and what they can bring to CSS. Hopefully, it has provided a brief insight into their value and potential. If you want to learn more about Sass and try it for yourself the official Sass website is a good place to start, with guidelines on everything from installing Sass in your project to implementing the various features in your code.