scss SCSS mixin用于概述文本

Posted 2021-05-17

@mixin outline-text($width:1px, $color:#fff) {
  $text-shadow-result: "0 0 0 #{$color}";
  @for $y from -$width through $width {
    @for $x from -$width through $width {
      $text-shadow-result: #{append($text-shadow-result, ", #{$y} #{$x} 0 #{$color}")};
    }
  }
  
  text-shadow:$text-shadow-result;
}

/*
USAGE:
.outlined {
  @include outline-text(2px, #fff);
}
*/