SCSSで長さ可変のちょうかわロングシャドウをつくる

Webのテキストでロングシャドウを作りたいとき、text-shadowプロパティを使って作る方法があります。CSSだとこんな感じ。

CSS:

text-shadow: 0px 0px #272826, 1px 1px #272826, 2px 2px #272826, 3px 3px #272826, 4px 4px #272826, 5px 5px #272826, 6px 6px #272826, 7px 7px #272826, 8px 8px #272826, 9px 9px #272826, 10px 10px #272826, 11px 11px #272826, 12px 12px #272826, 13px 13px #272826, 14px 14px #272826, 15px 15px #272826, 16px 16px #272826, 17px 17px #272826, 18px 18px #272826, 19px 19px #272826, 20px 20px #272826, 21px 21px #272826, 22px 22px #272826, 23px 23px #272826, 24px 24px #272826, 25px 25px #272826, 26px 26px #272826, 27px 27px #272826, 28px 28px #272826, 29px 29px #272826, 30px 30px #272826, 31px 31px #272826, 32px 32px #272826, 33px 33px #272826, 34px 34px #272826, 35px 35px #272826, 36px 36px #272826, 37px 37px #272826, 38px 38px #272826, 39px 39px #272826, 40px 40px #272826, 41px 41px #272826, 42px 42px #272826, 43px 43px #272826, 44px 44px #272826, 45px 45px #272826;

引用: https://bagelee.com/design/css/all_you_need_to_know_about_textshadow/

もっと簡単にロングシャドウを使いまわしたい

SCSSのmixinをつかってコンポーネント化しましょう。色も長さも変数として指定します。

SCSS:

@mixin gen-long-shadow($size: 600, $color: rgba(0, 0, 0, 0.5)) {
  $shadows: "";

  @for $i from 1 through $size {
    @if $i == 1 {
      $shadows: #{$i}px #{$i}px 0 #{$color};
    } @else {
      $shadows: #{$shadows}, #{$i}px #{$i}px 0 #{$color};
    }
  }
  
  text-shadow: #{$shadows};
}

これを適用したい要素に@includeするだけ。

SCSS:

.c-long-shadow {
    @include gen-long-shadow();
}

include時に長さも色も指定できる、ちょうかわおてがるロングシャドウの完成です。