Skip over navigation

SASS and LiveReload: Streamlining CSS Development

By on Apr 2, 2012 in Web Engineering

Web developers, I’ve got two things today that will help you out. A little thing and a big thing.

LiveReload

I’ve recently discovered the power of LiveReload. It’s a program that silently runs on your computer, and waits for you to make changes to your code. When you do, it reloads your browser. Then you can look over and see your changes, nearly instantly. It’s a little thing, but super handy. Not having to cmd+tab, cmd+r all the time has shaved microseconds off my development time. That may sound like a sarcastic review, but actually, I really like it. For reals.

But, it does more than that. You can configure it to run certain actions when you save your files. So, for instance, you could set up a script to push files out over FTP, or flip text upside down. Also, out of the box, it will help you with the big thing I mentioned. It will compile SASS.

SASS

SASS is an improved specification for CSS. A SASS file is similar to a normal CSS file, in that you specify how your site looks through the use of selectors and properties, but SASS gives you more tools for your belt. For instance, you can nest rules.

.giraffe {
   .neck {
      length: "super long";
   }

   .skin {
      spots: "sure, why not";
   }
}

This keeps you from having giraffes everywhere. And, trust me, that is a problem.

You can also define variables.

$delicious: "ranch dressing";

.salad {
   topping: $delicious;
}

.pizza {
   topping: $delicious;
}

.just-drink-it-straight {
   beverage: $delicious;
}

SASS has other great stuff, like mixins and inheritance. You can even use equations in your rules. Make H2’s half as big as H1’s, or make links twice as purply as your background color. Check it out at sass-lang.com.

SASS Reload

One thing about SASS, that used to keep me away, is that you can’t just use it straight on your website. You have to run it through a compiler that turns it into normal CSS. While that isn’t such an issue for me, with many projects that I work on, I’m collaborating with less nerdy people. So, I don’t want to have to start teaching people how to do it.

Solved: LiveReload does it for you. Tell LiveReload what directory to watch, and that there be SASS in there, and it will recompile the file every time you save. You can even tell it to minimize the CSS while it’s at it.

So, I’m a convert. I’m writing super clean SASS, partitioned into multiple files, which are compiled into a single, production ready, minified CSS file. Thanks, SASS.

Hey! This wasn't written by a pride of lions! It was written by , who does awesome work at Loud Dog, a digital branding firm in San Francisco that helps businesses express themselves authentically via identities, websites, and marketing collateral.

If you want us to do awesome work for you, if you have a question, or if you're just feeling lonely and want to chat, we want to hear from you!

Get in touch

Leave a Reply

Your email address will not be published. Required fields are marked *