SCSSでランダムな値を扱う方法

Sassでランダムな値を扱いたい場合にはどうしたらよいでしょうか？ JavaScriptのMath.random()メソッドのようにランダムな値を返してくれるrandom()メソッドを使うと便利です。

random()メソッドについて

random()は、0以上1未満の少数、または1以上引数未満の自然数を返します。引数を指定する場合は後者になります。使いどころは大量のDOM要素の位置や背景色をバラバラに設定したいようなケースです。技術デモではありますが、CSSのみでパーティクル表現を行ったSCSSでランダム値を出力してパーティクル - jsdo.itでは、random()メソッドを使って各パーティクルの位置やサイズをバラバラに指定しています。

使い方

例えば、divタグのwidth属性をrandoｍ()関数を使って定義する例を見てみましょう。引数には100を指定しています。

SCSS

div {
  width: random(100) + px;
}

div {
  width: random(100) + px;
}

div {
  width: random(100) + px;
}

これをコンパイルすると、以下のようにrandom()メソッドにより1以上100以下の自然数が返ってきているのが確認できます。

CSS

div {
  width: 69px;
}

div {
  width: 38px;
}

div {
  width: 35px;
}

使用上の注意

SCSSのrandom()メソッドは、あくまでコンパイル時にランダムな値を出力するだけです。一度コンパイルされたCSSの値は再度コンパイルしない限り変わることはありません。

最後に

たくさんのDOM要素に不規則な値を設定したいとき、手動で全て指定するのは大変です。そんなときはSCSSのrandom()メソッドを使って効率的にコーディングすると良いかと思います。

参考：Module: Sass::Script::Functions — Sass Documentation