CodePen の Sass で random 関数が使えるようになった

CodePen は ユーザが HTML,CSS,JavaScript で書いてコードを投稿して公開したり、誰かのコードをForkしたりすることができるSNSです。

ギャラリー上で CSSJavaScript で書いたアニメーションの一部を見ることができるので、 動きのあるコードは人気がある気がしますね。

random()がSassで利用可能に

26日、random() モジュールが追加され、Sass(SCSS) で利用可能になりました。 random() Function in Sass

random()利用法

random() は Sass(SCSS) で利用しますので、 CSS のパネルで Sass(SCSS) を選択しておきます。

スクリーンショット 2013-08-28 21.55.58

random(int)

第一引数に整数を渡すと、その数未満の乱数を一つ返してくれます。

top: random(500)+px;
left: random(500)+px;

例えば上のように使うと0〜499までの乱数を返してくれます。

どのように使うか

沢山の要素を不規則に配置したりするのに役に立ちます。

@for $i from 1 through 50 {
  .box-#{$i}{ top: random(100)+px; }
}

これでクラス名box-1〜box-50までの要素のtopに1〜99までの間の乱数が割り振られます。

これを利用して簡単なデモを作ってみました。

See the Pen CSS Particle Explosion by turusuke (@turusuke) on CodePen

上の例では50個の色の違うDIV要素が中央からランダムな位置まで移動し、最終的にまた中央へ戻るといったアニメーションをさせています。

一つ一つの位置をバラバラにしたりするのはとても面倒だったのですが、 これなら楽ちんですね!

ただ、一つ注意しなければいけないのは、 randomといってもこれはsassからCSSにビルドする時にランダムな値を出力するので、 ビルドされた後のコードはリロードしても変更されないということです。

なので、要素の z-index に random() を指定しておみくじのようなものを作ろうとしても、リビルドされるまでは同じ値しか返してくれません。

とはいえ、random()によってCodePenでの表現の幅がぐっと広がり、制作がより楽しくなりそうですね!