A year ago I was very excited to get my hands at Sass.
I thought it could fill the gaps in coding with CSS : preventing variables duplications, automatic generation of multiple static stylesheets depending on the rendering device (vs using media queries which are not always supported and require downloading all versions of the code)…
But it could not.
What really is Saas
Sass-lang.com states it is a “CSS extension language”, but don’t take it literaly or you will head straight for failure.
That would imply that Sass adds instructions to the CSS language ; however it’s not right because web browsers today only understand CSS, not Sass.
I fell into this trap as I tried to organize stylesheets with inheritance like in object oriented languages (OO) : this structure would always failed at a given point.
For instance : as variables only live in the Sass context, and disappear in the compiled CSS, if you want to make two versions of a stylesheet with different values of the same variable, you only have one option : build a CSS block or stylesheet for each value. There is no added value using Sass variables in media queries because they will just be replaced with their static, final value.
Make no mistake : Sass is a very helpful evolution for CSS, use it, but know its limits !