Get Ready to Feel SASS-Y

Syntactically awesome style sheets, aka Sass is a preprocessor scripting language that is complied into CSS. I decided to take aim at Sass for the next few weeks and figured to take you all along for the ride. For this first section, I wanted to discuss what Sass is and why it is great to use. Future blogs will actually go into practice.

To begin, Sass is an extension to CSS, that allows us to write more flexible code. Similar to Javascript and Python, Sass uses variables, functions (aka mixes, but we will talk about those at a later date), conditional statements and more! You can also split up your Sass files into multiple modules so that you can be better organized with larger styling projects.

Because we are writing SASS and not CSS right out the gate, we need to install an extension that is able to take that SASS and complier it into CSS so that browsers can read it. If you are using VSCode like myself, the extension I am going to be using is “Live Sass Complier”. Its logo is a purple eye and looks like the following image.

Once it is installed and you restart your VSCode to update, you will notice there is a small eye looking at the bottom of your VSCOde window. This eye watches your SASS and transforms it into CSS.

And just like that you can begin to code in a .scss file. After you have CSS code in your .scss file, you can click on the “watch Sass”, and it will complie that .scss file into a .css file. You would link the new .css file into your code.

I use to always like to think of myself as a creative person, but CSS was something that held me back. For me it was just semi-difficult to understand. However with Sass, it brings in so much “auto-magicalness” to styling web pages. If you already know Sass, then I am sure you can see where my excitement is coming from. However if you are like me and are just about to get your feet wet, then I can tell you that we are in for a fun and gnarly ride!