This week’s post is pretty technical—it’s only for users of Syntactically Awesome Stylesheets (Sass).
I’m leaving. Before I go, what is Sass?
Sass is a CSS preprocessor—a way to write your CSS stylesheets as if you were programming them, with variables, reusable mixins, and a lot else.
I can’t recommend Sass highly enough—it literally made possible my work on a recent client project. Of course, I had David to fool around with Ruby and the command line to get it installed in the first place. So if you’re pretty technically skilled and you’ve never used a preprocessor before, please give it a try.
I’m still here, to your surprise
That’s great news! Here we’re discussing a quick hack to output Sass variables directly to your browser, like this:
Why this is useful?
In my recent experience with Sass, I’d sometimes hit a styling bug, and not know whether the problem was caused by:
- A variable being improperly set (perhaps somewhere I hadn’t expected)
- Proper variable values but incorrect styling rules
As far as I know, Sass has no at-a-glance way to view variable values as compiled into the site’s stylesheet. So today’s hack lets you view any Sass variable value you want in your browser, allowing for easier debugging.
How to do it
It’s simple, and uses the
:before pseudo-selector applied to your
- Find the Sass partial that has the styles for your
- Give the
:beforepseudo-selector, as follows:
Build the string after
"content: "with as many previously declared variables as you want. (They don’t have to apply to your
bodyelement; they can apply to any part of your site.)
Note that in Sass syntax, “&” means “the element we’re already working on”—
bodyin this case, so
&:beforewill compile to
body:beforein your stylesheet.
- Recompile your stylesheet, and check your browser. It should have text giving your variable values in the top left corner.
Voilà: easy tracking of Sass variable values through your browser.
Was this helpful? Have a better way to do it? We’d love to hear from you in the comments below!