Covering Mixin

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;


  1. User Avatar
    Permalink to comment#

    @mixin coverer($top: 0, $left: 0, $width: 100%, $height: 100%)
    position: absolute
    top: $top
    left: $left
    width: $width
    height: $height

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.