scss MX-不透明度

Posted 2021-05-17

<div class="card">
  <div class="box sevenfive">75% opacity</div>
  <p>@include opacity(0.75);</p>
  <div class="box twofive">25% opacity</div>
  <p>@include opacity(0.25);</p>
</div>

@mixin opacity($opacity: 0.5) {
  $opacityPercentage: ($opacity * 100);
  filter: alpha(opacity=$opacityPercentage);
  opacity: $opacity;
}

/* mixin usage */
.box.sevenfive {
  @include opacity(0.75);
}
.box.twofive {
  @include opacity(0.25);
}

/* demo styles */
.card {
  margin: 2em auto;
  text-align: center;
}
.box {
  display: inline-block;
  background: #00FFFF;
  padding: .9em 2em 1em;
  font-size: 2rem;
  color: #0080FF;
}
p + .box {
  margin-top: 20px
}