Styling CSS The Sassy Way (SCSS) & Sass

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 and webapck. 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.

I prefer to use Sass over Less as outlined by many sites and articles online and published, it also has more functionality than less.

I’ll progressively add more SASS examples here over time.




Sass Official Site

Sass Functions (Documentation)


Links created with JSON and JavaScript. Sass colour fade with @For loop & lighten increment.


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

A Sass For Loop. (@For)


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.