What is Sass? and how to use Variables in Sass
Sass stands for “Syntactically Awesome Style Sheet”. This is not to be confused with SaaS, which is another phrase common in the developer world. That SaaS is pronounced the same way but stands for “Software as a Service” and is a totally different topic. So if you’re here for that I’m sad to inform you that you’ll need to look elsewhere.
So back to Sass, it is a scripting language that is complied to into CSS (Cascading Style Sheets). Basically what that means is that you can write your Sass in your language of choice (like Ruby or Java) and then it gets “translated” into CSS for you. Sass is “better” than writing in normal CSS though because it allows you to do things like save variables, nesting, and make reusable and modular CSS. It’s also compatible with all versions of CSS and open source! The newest version of Sass is SCSS or “Sassy CSS”. SCSS uses braces and there are some syntax difference. Both Sass and SCSS need to be compiled so you can use the one you’re most comfortable with.
If you have the hex code of a color you want to put in many part of the web app, you can just save it on a clip board or memorize the hex code. But with Sass, you can save it as a variable! Which doesn’t sound that exciting, but if you’re using a few colors and you have to try and remember if the one you want is #4286f4 or #5041f4. All you need to do is use a $ to indicate that you are declaring a variable. Then you can reuse the colors easily as $light-blue or $indigo. You can do this with basically any value, font faces, font sizes, etc.
The example above is a small snippet of Sass that makes the font face which is 2 values separated by commas and the hex color into variables. The syntax follows the convention from Ruby with “-” separating the words.
This is SCSS that complies to the exact same thing as the first Sass snippet. It has semicolon separated values. It also has braces to make nesting of the text more obvious.
This is what the Sass and SCSS is compiled to! The basic CSS that you know and love. In this smaller example, it might seem like a lot of work when the compiled code is so short, but you have to think about scale. If you’re working on a project with a lot of CSS features, then Sass is an amazing tool to have.
References: