SASS - Syntactically Awesome Style Sheets

The benefits of SASS

CSS at first seems like very complicated language with lots of rules and lots of attributes. But after working with CSS for a few years you will realise that it is a very simple language and at times its options can be limited. It’s like HTML, easy to learn, easy to use but very powerful. But CSS suffers from some very basic but very important issues. CSS3 has presented designers with a vast array of features on which to build animations and complex layouts but vendor prefixes have meant your code can become extremely bloated and in turn you an end up with massive CSS stylesheets. You can’t really break up a CSS stylesheet into manageable chunks with normal CSS as for performance reasons you should have as few stylesheets as possible, preferably one. SASS solves a multitude of problems that normal CSS has. I say problems but the real issue is a lack of features that you would expect from it. If you work with programming languages like JavaScript and PHP you will always expect to be able to work with things like variables, to develop code in a way that you don’t repeat yourself. CSS can come to the point where you are always repeating yourself if you don’t structure it properly. You can end up with huge amounts of unnecessary code. From an optimisation point of view, SASS gives you solutions to a lot of problems when optimising CSS.

• A few of the key benefits of SASS are as follows:
• You can break up your CSS into small SASS files.
• You can use variables throughout your SASS code for consistent values for things like fonts and sizes.
• You can build blocks of CSS that you can use / inherit within other CSS rules.
• You can nest rules within one another and see exactly where things are.
• You can develop SASS files that with default styles you can use across projects.
• You can compile your CSS down to one file very easily.
• You can automatically remove empty rules.
• You can automatically remove comments.
• You can automatically combine similar CSS styles.
• You can automatically minify all your CSS so it’s the smallest size possible.
• If you structure your SASS properly you may never repeat yourself.

I worked with CSS for years to a point where I know nearly all the rules off by heart and fatter using SASS I could honestly I would never go back. All the features above lead to one simple thing, a much improved workflow. You can cut out a huge amount of time on a project by using SASS. SASS doesn’t make CSS better, it makes working with CSS better.

SASS, LESS, or something else

There are many variations of CSS pre-processors now. LESS is another language which is similar and you can build CSS through things like SASS both with and without braces which caters for people who build and understand code differently but want the same end result. Which language you use is up to you. The beauty of these languages is that no matter which one you use you can use the same philosophy of not repeating yourself and breaking up your code into manageable files.