scss MX-文字阴影

Posted 2021-05-17

<div class="card">
  <h1 class="demo1">text-shadow Mixin</h1>
  <p>@include text-shadow(2px,2px,2px,rgba(0,0,0,.25));</p>
  <h1 class="demo2">text-shadow Mixin</h1>
  <p>@include text-shadow(-1px,-2px,3px,#00FFFF, 1px,2px,3px,#0080FF);</p>
</div>

@mixin text-shadow($x1:2px, $y1:2px, $blur1:5px, $color1:black, $x2:null, $y2:null, $blur2:null, $color2:null){
  @if ($x2) {
   text-shadow: $x1 $y1 $blur1 $color1, $x2 $y2 $blur2 $color2; 
  }
  @else {
    text-shadow: $x1 $y1 $blur1 $color1;
  }
}

/* mixin usage */
.demo1 {
  color: #0080FF;
  @include text-shadow(2px,2px,2px,rgba(0,0,0,.25));
}
.demo2 {
  color: #FFFFFF;
  @include text-shadow(-1px,-2px,3px,#00FFFF, 1px,2px,3px,#0080FF);
}

/* demo styles */
.card {
  margin: 2em auto;
  text-align: center;
}
h1 {
  font-size: 40px;
  margin: 10px 0;
  line-height: 1
}
p + h1 {
  margin-top: 40px
}