Sass で random

.scss でランダム処理をする機会があり使ってみたのでメモしておきます。

random() という関数で、コンパイル時にランダム数値が書き出される。
（なので表示上は異なるユーザー/端末でも同じ値）

random(10)

とすると 1〜10 の間で整数をランダムにとってくる。

random(10)+10

とすると 11〜20 の間で整数をランダムにとってくる。

percentage((random(10)) / 100)

とすると 1%〜10% の値になる。
実際の使い方的には、ランダムに移動するオブジェクトを複数個つくる場合、

.html

<div class="object01"></div>
<div class="object02"></div>

.scss

$objects: object01, object02; // 各クラスを登録
// 各クラスごとに移動距離とキーフレームを作成 ループで回す
@each $object in $objects {
  $animationDistance01: percentage((random(10)+5) / 100); // `5%〜15%` のあいだ
  $animationDistance02: percentage((random(10)+5) / 100);
  .#{$object} {
    animation: rotateAnimation--#{$object} 1s linear infinite;
  }
  @keyframes rotateAnimation--#{$object} {
    0%  { transform: translate(0, 0); }
    100% { transform: translate($animationDistance01, $animationDistance02); }
  }
}

.css 出力例

.object01 {
  animation: rotateAnimation--object01 1s linear infinite;
}
@keyframes rotateAnimation--object01 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(13%, 6%);
  }
}
.object02 {
  animation: rotateAnimation--object02 1s linear infinite;
}
@keyframes rotateAnimation--object02 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(8%, 12%);
  }
}

duration もランダムにしたらもっとランダムになりそうです。

参考：css - How to randomize float and percentage in SASS? - Stack Overflow