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!

--

--

--

Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Reversing a Linked List?!? 🤯

Priyanka Somrah

6 Common Mistakes Developers Make and How to Avoid Them

Boy in a white t-shirt sitting and sipping something from a blue cup in front of a computer with code on it

Top C Programming Interview Questions You Need To Master In 2019

3 Free Ways to Install Ubuntu on a Windows 11 PC

Fully Loaded Azure Kubernetes Service CLI command

Free CodeCamp Day 1

Python Dashboard using Plotly dash: Example 2

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Thomas Muscarello

Thomas Muscarello

Software Engineer

More from Medium

Closing the Closure Confusion

Synchronous & Asynchronous Programming basic understanding

What is Nullish Coalescing Operator

Internal Representation of Objects in JS