Mixin用于数据叠加选择器

Question

有没有办法将以下CSS规则转换为Mixin或使其更加SCSS？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<p id="p">Will try my jquery in this paragraph</p>
<button type="button" id="button">Click!</button>

Answer 1

Sassmeister demo Sass for循环。

@mixin overlays($count: 0) {
  [data-overlay]:before {
    content: '';
    position: absolute;
    background: #000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }

  @for $i from 0 through $count {
    [data-overlay="#{$i}"]:before {
      opacity: $i / 10;
    }
  }
}

@include overlays(4);