Filed under Coding
Xray Vision for Your SCSS Projects
A tiny SCSS guard that shades block level elements while you tune a grid, then disappears in production.
While working on a recent web project with a fine grained grid, I found the need to easily see the sizes of my block level elements. After trying a few techniques I settled on a small SCSS helper.
This code assumes you are using the SCSS syntax of Sass, so if you are not, you will need to do some translation.
The rules select all block level elements and shade the background color twenty percent black. Layers of block level elements become transparent and you can more easily judge the dimensions and alignment of them.
I also added a global variable so you can simply change the boolean from true to false to quickly turn this feature off. The conditional around the rule ensures that unless the condition is met, no rule makes it into your rendered CSS.
Compass version
The Compass mixins make the tint step short. You set a variable at the top of the file, wrap the rule in a conditional, and the debug shading only ships when you ask for it.
Plain Sass version
Without Compass you can achieve the same result with a plain background declaration and the same boolean guard. The important part is the guard, not the mixin.