Browser Sandbox - Spoon.net

SASS & Color Variables If you write CSS and you’re not using SASS & Compass yet, you should stop whatever you’re doing and go download Codekit right now. Do it, you’ll thank me later. But if you’re already familiar with the awesomeness that is SASS, I’d like to share a small tip about handling color variables. The CSS Way First of all, just so we’re all on the same page, here’s how you’d use colors in plain old dumb CSS: Simple enough. Variables to the Rescue SASS lets us define reusable variables, which can be used for any type of value but are especially useful for colors: This will work great… as long as your links are blue. Our “$blue” color is now actually red! Functional Variable Names Thankfully there’s a simple solution: instead of using variable names that describe the color, we’ll use names that describe the color’s function. Now we can change our link color without introducing any ambiguities in our code. It Gets Tricky See the problem? The Solution So here you go.