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プリプロセッサなしでは生きられない体になります。