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 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. 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…
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 byBen Graham
on Sunday, 2nd October, 2016.
Full Stack Designer 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. Currently I work as a consultant @ Avanade, an Accenture and Microsoft company.
UI/UX Designer | UI Developer