Generated by SassMeister.com.

SassMeister-input-HTML.html

<header>Header</header>
<nav>Nav</nav>
<article>Article</article>
<footer>Footer</footer>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "susy";

$susy: (
  debug: (
    image: show,
    color: blue,
    output: overlay,
    toggle: top right,
  ),
);

header{
}
nav {
  
}
article {
}
footer {
  
}


//visuals
$debug-bg: rgb(255, 0, 128);
html {background: #fff;}
header,nav,article,footer {
  padding-top: 1em;
  padding-bottom: 1em;
  background:linear-gradient(
    rgba($debug-bg,.125),
    rgba($debug-bg,.125)
  ), rgba($debug-bg,.25);
  background-clip: content-box, border-box;
  box-shadow: 0 0 0 1px rgba($debug-bg, .25) inset;
}

SassMeister-output.css

html {
  background: #fff;
}

header, nav, article, footer {
  padding-top: 1em;
  padding-bottom: 1em;
  background: linear-gradient(rgba(255, 0, 128, 0.125), rgba(255, 0, 128, 0.125)), rgba(255, 0, 128, 0.25);
  background-clip: content-box, border-box;
  box-shadow: 0 0 0 1px rgba(255, 0, 128, 0.25) inset;
}

SassMeister-rendered.html

<header>Header</header>
<nav>Nav</nav>
<article>Article</article>
<footer>Footer</footer>