Sass（SCSS）を使って絵を書いてみた

Sassの学習がてら絵を書いてみたので記事にしてみました。この記事を通してSassやCSSで絵を書く楽しさ（ついでにSassの使い方）を伝える事ができれば幸いです。

# 作品
[CodePen](https://codepen.io/)なるものを発見したのでQiitaの記事を書くためだけに導入しました。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="suguhito65" data-slug-hash="gOgBRZx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="gOgBRZx">
  <span>See the Pen <a href="https://codepen.io/suguhito65/pen/gOgBRZx">
  gOgBRZx</a> by すぐひと (<a href="https://codepen.io/suguhito65">@suguhito65</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# Sass
今回使用したSassの機能を簡単にではありますが解説してみたいと思います。

### Sass導入方法（VSCode）
VSCodeにて、拡張機能Live Sass Compilerをインストールします。
![986426ff820cfdb21cf20579777f2203.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/851225/86e04e86-a47f-497e-fa52-e82f752bd05c.png)
そして、拡張子がscss（例：style.scss）のファイルを作成するとWatchSassボタンが現れるのでポチッと押してください。
![c39ba971faf17c014563731508a9b44b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/851225/da41ed5f-875f-fb7e-2d13-04987d78b323.png)
するとcssファイルとcss.mapファイルが作成されます。
![d092e354501f99437184a5c9d2f13064.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/851225/e2d35296-0d86-377d-82c8-6de97146d256.png)
scssファイルにコードを記述するとこのcssファイルにもコードが記述されます（cssのコードに変換されて）。
htmlファイルでこのcssファイルを取り込む事でscssファイルで記述したものが反映されるわけですね。

### 変数

```scss:scss
$body: #ffd700;

.head {
  background-color: $body;
}
```

キャラクターの体の色を変数$bodyに入れ、使う時はbackground-color等の値のところに代入します。
色を変更したくなった時に変数の値だけ変更すれば、変数が使われている所の全ての色が変更できるので便利です。

### ＠mixinと＠include
CSSで絵を書く際よく使うプロパティを＠mixinでまとめといて、必要になったら＠includeで取り出すイメージですかね。

```scss:scss
@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ひとつを引数にすればいいので、コードがスマートになりました。

### ネスト（入れ子）と&

```scss:scss
.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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="suguhito65" data-slug-hash="poROweO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="poROweO">
  <span>See the Pen <a href="https://codepen.io/suguhito65/pen/poROweO">
  poROweO</a> by すぐひと (<a href="https://codepen.io/suguhito65">@suguhito65</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

絵に影を付けたい時に使えると思い追記しました。どの程度暗く（もしくは明るく）するかを%を用いて指定できます。

# CSSで絵を書くために
CSSで絵を書くために一番重要なのは図形の成形でしょうか。思い描く形を作り出す事が難しくもあり、楽しい部分でもあります。

### 三角形

```scss:scss
.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の色がそのまま三角形の色になります。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="suguhito65" data-slug-hash="eYgywor" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="eYgywor">
  <span>See the Pen <a href="https://codepen.io/suguhito65/pen/eYgywor">
  eYgywor</a> by すぐひと (<a href="https://codepen.io/suguhito65">@suguhito65</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

↑の図形の方が理解しやすいでしょうか？border-topを記述しない状態が三角形です。

### 台形

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="suguhito65" data-slug-hash="dyNJBpg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="dyNJBpg">
  <span>See the Pen <a href="https://codepen.io/suguhito65/pen/dyNJBpg">
  dyNJBpg</a> by すぐひと (<a href="https://codepen.io/suguhito65">@suguhito65</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

例えば↑のようにtransformを使う事で台形ができます。height・width・background-colorで作った四角形をtransformを使って変形させる事で、いろんな形が作れるので純粋に楽しいです。
transformは他にもいろんな使い方があるようなので、興味のある方はぜひ調べてみて下さい。

### 丸みのある図形

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="suguhito65" data-slug-hash="ZELvgPN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ZELvgPN">
  <span>See the Pen <a href="https://codepen.io/suguhito65/pen/ZELvgPN">
  ZELvgPN</a> by すぐひと (<a href="https://codepen.io/suguhito65">@suguhito65</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

border-radiusを4つに分けて記述した方がわかりやすいと思ったので分けています。
値は、（top-leftの場合）横50px・縦20pxの順番で記述し、その範囲を丸くしてくれます。%を使う事もでき、4つ全てを50%にすると円になります。
transformと組み合わせれば、できる図形の幅が広がります。

### アニメーション
Sassと同時に今回初めて取り入れてみたので、さほど詳しくありませんが使用した機能だけでも解説してみます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="suguhito65" data-slug-hash="wvgyYyQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="wvgyYyQ">
  <span>See the Pen <a href="https://codepen.io/suguhito65/pen/wvgyYyQ">
  wvgyYyQ</a> by すぐひと (<a href="https://codepen.io/suguhito65">@suguhito65</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

アニメーションと言えばtransitionとanimationがありますが、今回はanimationを使用しました。animationと＠keyframesを使う事でアニメーションを繰り返したり、繰り返す時間の間隔を指定できたりします。

```scss:scss
.ear2 {
  animation: ear2-move(アニメーション名) 1s(時間) infinite alternate ease-in-out;
}
```

infiniteは無限にアニメーションを再生する設定で、alternateが行ったり来たりの設定です（normalは行くだけ）。ease-in-outはアニメーションのタイミング・進行割合を指定する値の一つです（他にlinear、ease-in、ease-out等）。

```scss:scss
@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で絵を書く事で楽しく学習できています。興味のある方はぜひ試してみて下さい。