CSS The Sassy Way (SCSS)

CSS The Sassy Way using the SCSS syntax.

Sass is an abbreviation of Syntactically Awesome Style Sheets. Sass is pre-processed.  It can be compiled with various tools available like Gulp, Yarn, node-sass and WebPack. The final CSS file is comprised of multiple .SCSS partials which are compiled and output into one single css file for production.

It enables some programmable logic through the inclusion of variables, functions, mixins, @if / @else booleans & @for, @each, @while loops. Sass can lead to more re-usable and maintainable code. When developing with Sass, skills in the command line are necessary as well as the fundamentals of CSS. There are two types of syntax, the .scss syntax and the .sass syntax.

My preference is using the SCSS syntax as it is easier to understand, to learn and use on projects where skills & knowledge are varied among developers. Regular CSS works just fine with the .SCSS syntax too.

The .sass syntax uses indentation, no curly braces, new lines and does not make available the regular CSS language syntax. I believe this approach to many already familiar with CSS a little too abstracted from the original language and can potentially (quite easily) lead to an increase of syntactical and compilation errors with people less experienced or use to the syntax. The .sass syntax can be considered harder to read, however it is more concise.

Sass tends to have more functionality than less however they can be seen as different ways of doing similar things. Different flavours that extend CSS.

 

Resources:

SassMeister

Sass Official Site

Sass Functions (Documentation)

Map Function and Key Value Pairs with SASS. (@Each)

A 12 Column Responsive Grid.

The gutters are 30px.

Creating a Mini Colour Guide and Palette. Some Sass functions lighten and darken used within a Flexbox row.

 

Sass Buttons with Variables, Mixins & Functions.