キタックCGソリューションセンター

プリ(ン・フード)プロセッサー

制作室の叫び

CSSプリプロセッサのすすめ

2020年06月25日(木)

石本貴康

0

7

PV 39

CSSメタ言語とも言いますね。SASS/SCSSやLESSとかのことです。
CSSだけでは出来ない便利な記述ができるすごいやつだよ。
一度使い始めると通常のCSS編集が苦痛になるレベルで世界が変わります。
昔のサイトの修正でCSSファイルしかないと「ほげぇーー!」ってなりますよね。
ちなみに、昨年実施された海外のアンケートでは、9割弱の人が何らかのCSSプリプロセッサを使用しているそうです。国内はそこまで多くない気がしますが、それでも使用率はかなり増えてきているのではないかと思います。

(参考記事)The Front-End Tooling Survey 2019 – Results

CSSプリプロセッサの導入方法や書き方などは検索すればいっぱい出てきますので、ここでは「こんな感じの便利なことができる」という紹介をしたいと思います。

というわけで、以下のようなHTMLとSCSSを書いてみました。

【HTML】
<div class="wave">
    <div class="w w1"></div>
    <div class="w w2"></div>
    <div class="w w3"></div>
    <div class="w w4"></div>
    <div class="w w5"></div>
    <div class="w w6"></div>
    <div class="w w7"></div>
    <div class="w w8"></div>
    <div class="w w9"></div>
    <div class="w w10"></div>
</div>
【SCSS】
$waveW: 240px;
$waveH: 240px;
$dur: 4s;
$num: 10;

@keyframes wave{
  0%{
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  25%{
    transform: scaleY(1.8);
    animation-timing-function: ease-in;
  }
  50%{
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  75%{
    transform: scaleY(.2);
    animation-timing-function: ease-in;
  }
  100%{
    transform: scaleY(1);
  }
}

.wave{
  display: flex;
  align-items: flex-end;
  width: $waveW;
  height: $waveH;
  background-color: #e0e0e0;
  > .w{
    width: $waveW / $num;
    height: $waveH / 2;
    background-color: #00ff66;
    transform-origin: center bottom;
    animation: wave $dur ease 0s infinite;
    @for $i from 1 through $num{
      &.w#{$i}{
        animation-delay: 0 - $dur / $num * $i;
      }
    }
  }
}

で、その結果がこちら。

いまいち使いどころが思いつきませんが、波っぽい動きができました。
ご使用のブラウザによっては少し表示が変になっているかもしれません。その場合は諦めるか、別のブラウザを使うか、ブラウザの中の人に生卵でも投げつけるかしてください。

ちなみに、上記SCSSから書き出されたCSSはこんな感じです。CSSだけでは書きたくないですね。

@keyframes wave {
  0% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  25% {
    transform: scaleY(1.8);
    animation-timing-function: ease-in;
  }
  50% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  75% {
    transform: scaleY(0.2);
    animation-timing-function: ease-in;
  }
  100% {
    transform: scaleY(1);
  }
}
.wave {
  display: flex;
  align-items: flex-end;
  width: 240px;
  height: 240px;
  background-color: #e0e0e0;
}
.wave > .w {
  width: 24px;
  height: 120px;
  background-color: #00ff66;
  transform-origin: center bottom;
  animation: wave 4s ease 0s infinite;
}
.wave > .w.w1 {
  animation-delay: -0.4s;
}
.wave > .w.w2 {
  animation-delay: -0.8s;
}
.wave > .w.w3 {
  animation-delay: -1.2s;
}
.wave > .w.w4 {
  animation-delay: -1.6s;
}
.wave > .w.w5 {
  animation-delay: -2s;
}
.wave > .w.w6 {
  animation-delay: -2.4s;
}
.wave > .w.w7 {
  animation-delay: -2.8s;
}
.wave > .w.w8 {
  animation-delay: -3.2s;
}
.wave > .w.w9 {
  animation-delay: -3.6s;
}
.wave > .w.w10 {
  animation-delay: -4s;
}

上記の例の中だけでもCSSプリプロセッサの便利なポイントはいくつかありますが、特に便利なポイントを2つ紹介します。

便利ポイント① 変数で変更が簡単に

SCSSでは変数を使って、よく使う値や変更が多そうな値をCSSの記述の外側で管理できます。上の例だと

$waveW: 240px;
$waveH: 240px;
$dur: 4s;
$num: 10;

の部分が変数ですね。上からそれぞれ、表示幅、表示高さ、アニメーションの速さ、子要素の数です。
「幅いっぱいに表示したい」とか「アニメーションの速度をもう少し遅くしたい」といった修正があったときは、この変数をちょいちょいっと修正してCSSを書き出してしまえばOKです。
もしCSSだけで書いていたと思うと……修正指示が入るたびに叫んでしまいますよね。「ちょっと変えるだけだから簡単でしょ〜?」とか言われたら、暴力による対話に発展する可能性さえあります。

【修正例】
$waveW: 100%;
$dur: 8s;

※上記変数の値以外は変更していません。

便利ポイント② ループ(繰り返し)が使える

ちょっとプログラムっぽいですが、CSSプリプロセッサは繰り返し記述が使えるので、連番クラスでちょっとずつ値を変化させていく、みたいなことが簡単にできます。

@for $i from 1 through $num{
  &.w#{$i}{
    animation-delay: 0 - $dur / $num * $i;
  }
}

この部分がループの記述です。書き方とかループの概念については省略しますが、上の展開後のCSSの「.wave > .w.w1」から「.wave > .w.w10」までの記述になります。あれだけの記述がたったこれだけで済みます。

CSSで書いていた場合、もし追加の修正指示で「幅いっぱいにしたら波1つ1つの大きさが目立つね!もっと細かくできない?」とか言われたら、追加部分を書くより先に退職願書いちゃいますよね。
でもSCSSなら簡単に修正できます。辞めなくていい。やったー!

【HTML】
<div class="wave">
    <div class="w w1"></div>
    <div class="w w2"></div>
    <div class="w w3"></div>
    (...中略...)
    <div class="w w298"></div>
    <div class="w w299"></div>
    <div class="w w300"></div>
</div>

※HTMLはExcelを上手く使うなどして頑張ってください……
【SCSS】
$num: 300;

※上記変数の値以外は変更していません。

カッとなって300分割してしまいましたが、流石にやりすぎでしたね。完全にただの波形になってしまいました。まぁこれはこれで。
ブラウザによっては誤差のせいで波部分が幅いっぱいになっていないかもしれません。その場合は、もう分かっていますよね。生卵は持ったか?

この例では変数と繰り返しくらいしか出ていませんが、他にも便利機能はいっぱいあります。興味を持ったら是非調べてみてください。

さいごに

こんな感じで、CSSプリプロセッサを導入すると色々と便利なことが多いです。
単純に全体の記述量が減るので、作業時間が短くなります。また、可読性が向上するので、メンテナンスしやすさも格段にあがります。多分。

作業時間が短くなれば、それだけ他の部分に時間を割くことができます。原稿を流し込む際にしっかり読んでおかしいところがないか確認するとか、一旦作った後の全体的なバランスのチェックにより時間をかけるとか、サイト全体のクオリティアップに繋げることができます。

保守にしても、CSSプリプロセッサなら同じ記述や値を1つにまとめることができるので、修正時にありがちな「あっちは直したけどこっちは直っていない」といったミスを回避しやすいです。

CSSが書けるなら学習コストもそこまでかからないと思うので、まだ使ったことがない人は是非試してみてください。
すぐにCSSプリプロセッサなしでは生きられない体になります。

Share プリーズ

よろしければどうかご感想を!

この記事のタイトル
CSSプリプロセッサのすすめ
感想を送るノート
お名前必須
メールアドレス必須
ご意見・ご感想必須

ご入力いただいた内容は、当社プライバシーポリシーに基づき厳重に管理いたします。メールの返信以外には使用しません。プライバシーポリシーに同意の上、お進みください。

確認画面はありません。
いったんページの上部に戻りますが、問題なく送信されます。

書き手は私 石本貴康

キタックCGSCコアメンバー

  • 樋口大輔
  • 小林将太
  • 高橋未羽
  • 高橋皓一
  • 石本貴康
  • 佐藤サバ美
  • こめ
  • 佐久間尭