A17 SCSS Utilities

Description

Draws a background the full viewport width, breaking out of the container width. It inherits the colour from the element background colour.

Output

app.css

.background-fill {
  position: relative;
}
.background-fill::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 100vw;
  margin-left: -50vw;
  background-color: inherit;
  pointer-events: none;
}

SCSS Usage

_component.scss

.features {
  @include background-fill;
  background-color: #000;
}

Demo

document.html

<div class="bg-accent background-fill my-gutter py-gutter"></div>