SCSS Developer Mixin To Highlight Box Layouts

dev-box-examples.scss

@import 'utilities';

/* Example Dev Boxes */

// Basic Example
.dev-box {
  @include dev-box;
}

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

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

// Customize All Options
.custom-box {
  @include dev-box(blue, green, dashed);
}

utilities.scss

/* 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;
	}
}