In a nutshell: What is SASS?
SASS is a CSS pre-processor which helps developers simplify complex stylesheet requirements. It’s designed to cut out repetitive tasks, speed up your workflow and help organise your styles – read on for three quick tips explaining the do’s and don’ts of using it in your projects…
1) Nest is best
Problem
You find yourself endlessly repeating parent selectors to target child elements. You’re going against the DRY (do not repeat yourself) methodology.
Solution
Nesting is one of the most immediately obvious benefits of SASS. It enables you to organise your styles hierarchically and cut down on repetitive coding, using a familiar nesting pattern to group your selectors together.
Beware
It’s easy to get carried away with nesting but as a general rule of thumb keep it within three levels. If you’re going deeper you may be becoming too specific and tying your selectors down too rigidly. Also remember the deeper you nest the slower your page becomes, whether that’s from larger CSS files or the browser trawling through all the layers of descendant selectors.
2) Make one change to rule them all
Problem
Your client requires two sites building, they’re very similar in style but with different colour schemes.
Solution
Variables are perfect in this situation. You specify your colour in one place and then pull that variable in across your stylesheet. SASS also allows you to use shades of your variable colour too e.g. lighten($accent-colour, 30%). Variables are great for whenever there’s a value you find yourself repeating a lot, it saves time and keeps your CSS consistent.
Beware
Keep your variable names generic to avoid confusion should the values need to change, i.e. don’t use $dark-orange for a cross-site accent colour use $accent-colour.
3) Fix it in the mix
Problem
Your site build requires a number of CSS3 effects including gradients, rounded corners and transitions. You’re finding yourself writing out all the vendor prefixes and fallbacks each time.
Solution
Mixins are perhaps the most powerful of all SASS features. They allow you to easily share snippets of CSS across your stylesheet whilst still passing in unique values. This makes them ideal for writing cross-browser CSS.
Beware
They’re easy to misuse, keep in mind your processed CSS should still remain DRY. Use %placeholder and @extend for where you’re simply repeating a chunk of CSS. Only use mixins for when you require different values to be outputted.
This is only the beginning of what SASS can do. You can delve into advanced maths and use its programming capabilities with for/while loops and if statements. You can have it calculate the relative sizes of your html elements for perfectly fluid sites or convert pixel values to rems with cross-browser support. But however far you choose to take it, once you’ve started to explore what SASS can do for you, you won’t look back.
