テキストの 縁取りを 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 は 便利ですね〜