テキストの 縁取りを Sass で 考えてみる

テキストを 縁取りしたいな と思って 調べてみたら text-stroke なんて スタイルが あるみたいですが まだ 規格化されていないみたいです

というわけで text-shadow を 使って 縁取りしてみようと 思いました

ちなみに text-stroke の ドキュメントは こちら

-webkit-text-stroke
https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-text-stroke

普通に考えてみる

.text-bordering {
  text-shadow:
    white -1px -1px,
    white -1px  0px,
    white -1px  1px,
    
    white  0px -1px,
    white  0px  0px,
    white  0px  1px,
    
    white  1px -1px,
    white  1px  0px,
    white  1px  1px;
}

普通に 周りに ぐるっと 影をつけると 無駄も多いかもしれませんが こんな感じで きれいに表示されました

ただ これが 2px だと もっと 書かなきゃいけないので Sass の mixin で うまいことできないかな?? と 思い 作ってみることにしました

mixinにしてみる

@mixin text-bordering( $size: 1px, $color: white ) {
  $value: unquote("");
  @for $x from -$size through $size {
    @for $y from -$size through $size {
      $value: $value + $color $x $y;
      @if( $x != $size or $y != $size ){
        $value: $value + unquote(",");
      }
    }
  }
  text-shadow: #{$value};
}

そのまま mixin に してみました これだと 無駄も マシマシ に なるので もっと良い方法はあるかと思います

とりあえず 使う分には 問題ないかと思いますが
もう少し スマートな方法があったら 教えてください!!

それにしても mixin は 便利ですね〜

Related Article

macOS Sierra に 開発環境 を 再セットアップ する

詳細へ »