X-Ray Vision for Your SCSS Projects
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 the following code.
This code assumes you’re using the SCSS syntax of SASS… so if you’re not, you’ll need to do some translation.
These SCSS rules will automatically select all block-level elements and will shade the background color 20% black. Layers of block level elements will become transparent and you’ll be able to 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.
Comments