title: Mixin for data-overlay selector
body: <p>Is there a way to convert the following CSS rules to a Mixin or make it a bit more SCSS?</p>
  
  <pre><code>[data-overlay]:before {
      content: '';
      position: absolute;
      background: #000;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 0;
  }
  
  [data-overlay="0"]:before {
      opacity: 0;
  }
  
  [data-overlay="1"]:before {
      opacity: 0.1;
  }
  
  [data-overlay="2"]:before {
      opacity: 0.2;
  }
  </code></pre>