News

Whether it is Sass, LESS, or some other preprocessor out there, you need to start using one. I had put off learning one of the systems for a while just because I was so busy with day to day work. Once I settled down to learn a system, Sass in my case, I immediately fell in love. I’m still learning how to best incorporate all the features available into my CSS formulations so that I can fully taking advantage of mixins, variables, extends, and just DRY (Don’t Repeat Yourself) coding in general.
For me, it was an easy pickup because I’ve been coding backend and frontend sites for a while, but even with basic HTML and CSS coding under your belt, after some basic programming concepts like nesting and variables you will increase your productivity and enjoy writing CSS much more.
For a quick overview on how Sass can help you, check out their helpful Sass Website.
For a quick example, below is a snippet of variable usage:

SCSS

$font-stack:   Helvetica, sans-serif;

$primary-color: #333;

body {

font: 100% $font-stack;

color: $primary-color;

}

OUTPUT

body { font: 100% Helvetica, sans-serif; color: #333;} 

This is really useful if you want to define a color palette and then use those variables in multi locations without having to remember the hex value. Also, if you need to update a color value you don’t have to search the whole text and can just update it in one place.
Besides learning the syntax, you will have to setup a preprocessor to actually compile the code into usable CSS, since browsers cannot yet read SCSS.
For me, that was the hardest part, getting it installed and working correctly for me. The Sass site does have some good information to help you get started. And, of course, Googling for help with your particular system or IDE is also a go to.