CSS The Sassy Way
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 limited logic through the inclusion of variables, functions, mixins, @if / @else booleans & @for, @each, @while loops. Sass can lead to more reusable 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 is 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 syntax and compiling 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 flavors that extend CSS.
Resources:
Sass Functions (Documentation)
Map function, key-value pairs, and @debug with SASS. (@Each)
A colour guide/palette. Sass functions (lighten and darken) used within a Flexbox row.
A 12 Column Responsive Grid.
Sass Buttons with Variables, Mixins & Functions.