《Mixin》フラットスタイルのロングシャドウをSassだけで表現する。

フラットデザインでよくみるテキストのロングシャドウを表現する@mixinをつくりました。

デモ

long shadow text

コード

<div class="shadow">
  <h1 class="shadow_inner" href="">flat style shadow</h1>
</div>

$flat-color: #FBA848;

@function setLongShadow($color, $length) {
  $value: 0 0 $color;
  @for $i from 1 through $length {
    $value_i:  $i + 'px' + ' ' +  $i + 'px' + ' ' + $color;
    $value: #{$value}, #{$value_i};
  }
  @return $value;
}

@mixin longShadow($color, $length) {
    text-shadow: setLongShadow($color, $length);
}

.shadow {
  background-color: $flat-color;
  overflow: hidden;
}

.shadow_inner {
  padding: 4vw;
  @include longShadow(darken($flat-color, 12%), 300);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 4vw;
  font-weight: 600;
  letter-spacing: .1em;
  white-space: nowrap;
  text-transform: uppercase;
  display: block;
}

引数にはシャドウのカラーとシャドウの長さを指定します。

@include longShadow(darken($flat-color, 12%), 300);
// longShadow(シャドウのカラー, シャドウの長さ);

おわります。