Code Snippet: SCSS Developer Mixin To Highlight Box Layouts

The Box Model, the brick and mortar all web pages are built on. Or whatever. There used to be a time when boxes were either inline or blocks, padding and borders were always added to the box size, and basically everyone was using tables for layouts anyway.

Now we have flexbox and grids. And there are all kinds of clever methods and layouts to get inline content or fluid layouts to display. So there’s a good chance you might need, at some point, to see what the browser considers to be the real computed shape and outline of the <div> bricks you’re playing with.

For most front-end developers, we eventually settled on a simple style hack, the dotted red outline. This could be applied to any element, or child elements by adding a simple declaration in the browser’s style inspector:

.box {
	outline: 1px dotted red;
}

Outlines don’t take up space in the box layout, so there’s no observer effect. This is in contrast to a the border property, which would have its width added to the box layout and could shift the flow of content.

Modern Layout Debugging

This was all before hot module replacement, LiveReload and even CodeKit made the refresh button obsolete. Now its rare that tinkering with CSS requires typing styles into the inspector. These tools allow us to write experiments right in our source files and see the results applied across the entire site, and as part of the cascade, and almost instantly.

So, to help keep our hands out of the inspector, lets make a reusable mixin we can use as shorthand. Then we can add it anywhere in our SCSS files to debug layouts on the fly. Plus, SCSS allows us to use variables and nest styles, so we can stuff a bunch more functionality into a single declaration.

Check it out:

/* Dev Box Inspector
 *
 * Adds a high contrast outline to the specified element to highlight
 * the box edge and layout.
 *
 * @param {string} $color (red) - outline color
 * @param {string} $background (yellow) - background highlight
 * @param {string} $outline (dotted) - outline style
 */

@mixin dev-box($color: red, $background: yellow, $style: dotted) {
	background: fade-out($background, 0.95);
	outline: 1px $style $color;

	&:hover {
		background: fade-out($background, 0.75);
		outline: 2px $style $color;
	}
}

Now we can add @include dev-block; to any selector to quickly see it highlighted in the browser. It even responds to cursor hover events with some extra focus.

See the Pen Dev Box Highlighter by Ian (@ian-pvd) on CodePen.

To apply the highlight to all child elements, just use the * universal selector. Or to use a different set of colors to highlight different blocks, add some variable overrides.

// Change Box Colors
.parent-box {
  @include dev-box(orange, green);

  // Highlight All Child Elements
  * {
    @include dev-box(#FF00FF, purple);
  }
}

Now you can highlight boxes quickly anywhere in your theme while authoring SCSS files, and see the changes instantly thanks to webpack and the magic of HMR.