Siwicki

Too Much Sass

February 02, 2015

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.

.nav {
    color: $link-color;
}

Workflow:

The agency I work for has a very specific LAMP stack that runs a very customized content management system. We really can’t roll out a full SASS workflow into our system without a major rewrite of the system. But, I found myself using SASS everyday. There are a number of tools that make this easy.

Codepen

This is for if you are building a little component for an existing page or just need to make a quick mock up. Codepen has become an essential part of my mockup process. Codepen also has great SASS support and it will allow you to pull in Compass (link to more details) which, as stated on their homepage: “Compass is an open source CSS authoring framework. It allows you to pull in a lot of goodies into your SASS file.”

Codepen will compile your SASS into CSS and will allow you pull in Compass and really be able to expand your CSS and do it all in the browser. It will become an essential tool in the early process of learning. It is the best way to jump in and start trying some of these SASS rules.

Apps

There are a number of Apps that will watch your local files and compile SASS To CSS. My favorite app is Prepros. It is cross platform with both Windows and Mac apps, and the options are endless. Prepros compiles not only SCSS, but will also compile your Coffeescript and even Haml and Markdown. It is free to try and the pro version is like 30 bucks. What you get makes this well worth it. It changed my workflow forever after grabbing it. The live refresh and Sass error reporting make it one hard thing to give up.


John SiwickiWritten by John Siwicki who lives and works building interesting things. You should follow him on Twitter