Covering Mixin

Avatar of Chris Coyier
Chris Coyier on

I find myself using these properties together all the time, which is typically a good opportunity for an abstraction like a mixin:

@mixin coverer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

For example, a full-page overlay:

<div class="overlay"></div>
.overlay {
  @include coverer;
  background: rgba(black, 0.5);
  z-index: 1000;
}