Sassの学習がてら絵を書いてみたので記事にしてみました。この記事を通してSassやCSSで絵を書く楽しさ（ついでにSassの使い方）を伝える事ができれば幸いです。
作品
CodePenなるものを発見したのでQiitaの記事を書くためだけに導入しました。
See the Pen gOgBRZx by すぐひと (@suguhito65) on CodePen.
Sass
今回使用したSassの機能を簡単にではありますが解説してみたいと思います。
Sass導入方法（VSCode）
VSCodeにて、拡張機能Live Sass Compilerをインストールします。
そして、拡張子がscss（例：style.scss）のファイルを作成するとWatchSassボタンが現れるのでポチッと押してください。
するとcssファイルとcss.mapファイルが作成されます。
scssファイルにコードを記述するとこのcssファイルにもコードが記述されます（cssのコードに変換されて）。
htmlファイルでこのcssファイルを取り込む事でscssファイルで記述したものが反映されるわけですね。
変数
$body: #ffd700;
.head {
background-color: $body;
}
キャラクターの体の色を変数$bodyに入れ、使う時はbackground-color等の値のところに代入します。
色を変更したくなった時に変数の値だけ変更すれば、変数が使われている所の全ての色が変更できるので便利です。
＠mixinと＠include
CSSで絵を書く際よく使うプロパティを＠mixinでまとめといて、必要になったら＠includeで取り出すイメージですかね。
@mixin ptlm($margin) {
position: absolute;
top: 50%;
left: 50%;
margin: $margin;
}
.head {
@include ptlm(-7em 0 0 -4em);
}
.left-eye {
@include ptlm(-2.3em 0 0 0em);
}
position〜leftは固定の部分ですがmarginはそれぞれのクラスによって値が違うため、ptlm（任意の名前）の引数に$marginを入れます。そして、いざクラスでptlmを使いたい時は＠includeを使用し、（）内にmarginの値を入れて使用します。
ちなみに私がCSSで絵を書く際、topやleft（もしくはrightやbottom）でだいたいのあたりをとってからmarginでポジションの微調整をするのが常でしたが、今回はmarginにポジション取りの全権を与えました。その方がmarginひとつを引数にすればいいので、コードがスマートになりました。
ネスト（入れ子）と&
.tail {
@include ptlm(3.2em 0 0 3.6em);
@include hw(1.5em, 1.8em);
@include border(0.3em);
background: #8b4513;
transform: skewX(-10deg) rotate(-20deg);
&::before {
@include ptlm(-3.1em 0 0 -0.4em);
@include hw(2em, 2.5em);
@include border(0.3em);
content: '';
background: $body-s;
}
&::after {
@include ptlm(-6.5em 0 0 0.8em);
@include hw(4em, 5em);
@include border(0.3em);
content: '';
background: $body-s;
}
.tail-arrange {
@include ptlm(-2.85em 0 0 0.7em);
@include hw(1.1em, 1.8em);
background: $body-s;
z-index: 1;
&::before {
@include ptlm(1.55em 0 0 -1.75em);
@include hw(0.5em, 0.83em);
content: '';
background: #8b4513;
}
}
}
ネストを使う事でtailとtail-arrangeの親子関係がわかりやすいですね。&を使う事でbefore・after等の擬似要素やhover・active等の擬似クラスもネストできます。
ちなみに絵を書く時にbeforeとafterをよく使います。これらを使うと１つのdivタグで3つの図形を作れるので便利ですね。contentがないと反映されないので忘れずに（値は空にします）。
lightenとdarken
See the Pen poROweO by すぐひと (@suguhito65) on CodePen.
絵に影を付けたい時に使えると思い追記しました。どの程度暗く（もしくは明るく）するかを%を用いて指定できます。
CSSで絵を書くために
CSSで絵を書くために一番重要なのは図形の成形でしょうか。思い描く形を作り出す事が難しくもあり、楽しい部分でもあります。
三角形
.nose {
@include hw(0, 0); /* heightとwidthが0 */
border-left: 0.27em solid transparent;
border-right: 0.27em solid transparent;
border-bottom: 0.3em solid #000;
}
鼻の部分（三角形）の作り方は、heightとwidthを0にしてborderのleftとrightをtransparent（透明）にする事でできます。border-bottomの色がそのまま三角形の色になります。
See the Pen eYgywor by すぐひと (@suguhito65) on CodePen.
↑の図形の方が理解しやすいでしょうか？border-topを記述しない状態が三角形です。
台形
See the Pen dyNJBpg by すぐひと (@suguhito65) on CodePen.
例えば↑のようにtransformを使う事で台形ができます。height・width・background-colorで作った四角形をtransformを使って変形させる事で、いろんな形が作れるので純粋に楽しいです。
transformは他にもいろんな使い方があるようなので、興味のある方はぜひ調べてみて下さい。
丸みのある図形
See the Pen ZELvgPN by すぐひと (@suguhito65) on CodePen.
border-radiusを4つに分けて記述した方がわかりやすいと思ったので分けています。
値は、（top-leftの場合）横50px・縦20pxの順番で記述し、その範囲を丸くしてくれます。%を使う事もでき、4つ全てを50%にすると円になります。
transformと組み合わせれば、できる図形の幅が広がります。
アニメーション
Sassと同時に今回初めて取り入れてみたので、さほど詳しくありませんが使用した機能だけでも解説してみます。
See the Pen wvgyYyQ by すぐひと (@suguhito65) on CodePen.
アニメーションと言えばtransitionとanimationがありますが、今回はanimationを使用しました。animationと＠keyframesを使う事でアニメーションを繰り返したり、繰り返す時間の間隔を指定できたりします。
.ear2 {
animation: ear2-move(アニメーション名) 1s(時間) infinite alternate ease-in-out;
}
infiniteは無限にアニメーションを再生する設定で、alternateが行ったり来たりの設定です（normalは行くだけ）。ease-in-outはアニメーションのタイミング・進行割合を指定する値の一つです（他にlinear、ease-in、ease-out等）。
@keyframes ear2-move {
0% {
transform-origin: bottom right;
transform: rotate(0deg);
}
10% {
transform-origin: bottom right;
transform: rotate(30deg);
}
20% {
transform-origin: bottom right;
transform: rotate(0deg);
}
100% {
transform-origin: bottom right;
transform: rotate(30deg);
}
}
＠keyframesでアニメーションの動作を指定します。今回はtransformのrotateで30°回転させるアニメーションです。transform-originは回転の中心を設定するプロパティで、↑は回転の中心を右下に指定しています（他にcenter等）。0%〜100%は1s（１秒間）の中での動き方を指定するものです。
終わりに
HTML&CSSやSassの学習をする際、できる事なら楽しんで学習したいものです。私の場合は、CSSで絵を書く事で楽しく学習できています。興味のある方はぜひ試してみて下さい。