Published on

# Too Much Sasss

Authors

For such a long time, I wasn’t buying into this. I can write CSS just fine. I did need to add another layer on top of that to add another step to my workflow. I was also worried that this would be just a small movement and then it would be “hot” again to write vanilla CSS. Which is what is going on with Javascript. I feel like I just read four posts titled “You don’t need jQuery anymore.”

But, blog post after blog post got me to finally give it a chance. I started with some very basic syntax. I just wanted to dip my toes in and see how I liked it. Within about 30 seconds, I saw and felt all this power that I was missing. Yes, SASS does compile to CSS, but this layer will give you more power and will clean up your code and make your work easier to scale and easier to maintain.

I want to walk through some small tweaks that you can implement today—some ways to get it into your workflow, even if your development environment is not be ready for it. I’ll help you get comfortable with these basic SASS concepts to just get your feet wet and get you looking at your CSS a little differently. Nesting

When I first read about nesting, I got upset. I thought to myself: “This is dumb. Why would I ever use this? It would just mess up my CSS.” Literally, the nav project I worked on looked like this:

.nav ul { } .nav ul li {} .nav ul li a{}

That went on for easily 50 lines, but it’s Sass that can be taken care of with just a small tweak.

.nav { ul {} ul li {} ul li {} }

It makes your file so much more readable, and makes it easier to find the story that is unfolding in your stylesheet. Also, you need to be careful of nesting too deep. If you go more than three levels deep, you are going to have a bad time. If you want to go deeper than the span in the example, it might be worth taking a step back and looking at your markup. That is going to a hyper specific rule and you might be able to work around that.

.nav { ul {} ul li {} ul li { span {} } }

Variables

$font-stack: Helvetica, sans-serif;$white-main: #FF0; $link-color: #CACACAl; SASS use$ to set a variable. The best way to think about a variable is as something that is stored and can be accessed throughout your document.

Variables allow something like below to happen. We have all had that project where you have to change your color scheme or maybe some last second updates. Setting Variables for your colors, fonts, and anything else that might change over the course of a project is as simple as changing the one line.