Add some SASS to your project!
We all know that no matter how good your functionality is on your app or site, it is really nothing without the styling behind it! You may have the some of the best code of all time written but if it looks terrible no one is gonna use it! So let’s talk about some ways to better your styling skills!
Well… we could always use one of the wonderful frameworks that are provided for us, for example: Bootstrap, Semantic UI, Tailwind, and the list goes on and on. Now this is not a blog about why these frameworks are bad, this is a blog about why SASS is better than them all!
First of all if you don’t know what SASS is well let me tell you!
SASS is a CSS pre-processor that lets you use variables, mathematical operations, mixins, loops, functions, imports, and other interesting functionalities that make writing CSS much more powerful.
Now I know that was a lot of random words put together but let’s dive into my favorite of these concepts.
Let’s start with variables… In SASS you can use variables as a way to store information that you want to use throughout your entire project. You can use this concept to store colors, functions, and anything else you might want to use globally throughout your app!
In this photo above we can see that I have stored my “main color” and I have also stored a mixin, which is a prebuilt SASS function that allows you to make groups of CSS declarations that you want to use globally in your site. (Mixins are a bit more complicated so we won’t be tackling that in this blog. ) These global variables make staying consistent with your styling so much easier!
Let’s talk about my favorite my favorite aspect of SASS, and that is the nesting of style elements. Within a typical CSS sheet you can not determine the hierarchy of your elements as they are written in your html or js pages. In CSS if you have a nested p tag with a div you cannot see that those two have a parent and child relationship.
SASS changes all of that. SASS lets you nest your style elements in the same way that you have them nested within your actual code. Let’s take a look at an example:
Just by looking at this code it is pretty easy to see the hierarchy that is happening within the code. Let’s break it down.
The main parent component for this sheet is the .menu class. We can see that the closing bracket for this class is the very last one on the page so we can assume the other elements are nested within the parent .menu class. From here we can see that there is a <ul> and within that <ul> is an <li>. It is very easy to understand the flow of a page simply by looking at how the elements are nested within the SASS sheet.
Obviously there are TONS and TONS more things that can be done with SASS but this was to give a quick overview of why you should be using SASS and why it will make your life as an engineer much easier!
Thank you for reading!:)
