Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8767

stylusで乱数を生成する方法と、特定の範囲内で値を返す関数

$
0
0

タイトルの通りだけど、なかなか見つけられなかったので、メモ

stylusで乱数を生成

これは簡単で、

  transform translateX(unit(floor(math(0, 'random') * 3), "px"))

例えば上のように書くと、
translateXの値が0~2pxの間で出力される。
ちなみにmath(0, 'random')で0~1未満の数値がランダムで生成されて(JSのMath.random()と同じ)
それに3を掛けたものを stylusのfloor()関数で小数点以下切り捨てている感じ。
最後にunit関数でpxを後ろに繋げている。ちなみに+ 'px'とかやってもエラーになる。

特定の範囲内で値を返す関数の作り方

上が分かれば、こんな物が作れる

random(min, max)
  return floor(math(0, 'random') * (max - min + 1) + min)

これで、3~10の間で乱数を生成したければ、

.test
  $x = unit(random(3,10), 'px')
  transform translateX($x)

とすれば、
コンパイルされて

.testtransform:translateX(4px);

となる。

参考:https://github.com/stylus/stylus/issues/876


Viewing all articles
Browse latest Browse all 8767

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>