Styling CSS The Sassy Way (SCSS) & Sass


CSS The Sassy Way using the SCSS syntax.

Sass is an abbreviation of Syntactically Awesome Style Sheets. It can be compiled with various tools available, my favourite being Gulp. The final CSS file is comprised of multiple .SCSS partials which are compiled and output into one single css file for production.

It enables 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. Plain static CSS works just fine with the .SCSS syntax too.

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 the coming months…

 

Resources:

SassMeister

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.

 




This article was written by

Ben Graham

on Sunday, 2nd October, 2016.

UI/UX designer & UI Developer from Brisbane, Australia. I completed a degree in Interactive and Visual Design from Queensland University of Technology. In my spare time I enjoy travelling and practicing photography. I have a keen interest in learning, regularly training and developing skills in ui design, user experience design, web accessibility, front end development & graphic design. I believe that our sites can be accessible, functional and aesthetically pleasing. Currently I work as a consultant @ Avanade, an Accenture and Microsoft company.

UI/UX Designer | UI Developer