IM

  • Code
  • Tools
  • Design

Styleguide Variable Trick

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.

See the Pen CSS Styleguide Color Variable / Hex Value Displys by Ian Mitchell (@IanMitchell) on CodePen.

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