My profile picture. My mom says I'm a handsome boy!
← All Posts

Styleguide Variable Trick

#Code, #Design, #Tools

I recently created a pen that shows how to use a Sass mixin to display the value of a variable alongside the name, but in a way that doesn't allow the user to select it - no copy pasting the value, just the name!

I did this recently for Zillow's styleguide (we use Less) and figured I'd port it to Sass. The trick is pretty simple in nature - you just assign the value of the variable to the CSS content attribute.

The downside is you won't be able to search for the value - searching for "2ECC40" returns 0 results.