テキストの 縁取りを Sass で 考えてみる
この記事は 2019年 2月 22日 に書かれた記事です。
テキストを 縁取りしたいな と思って 調べてみたら 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 は 便利ですね〜
