Stylusにはwhileループがないらしいですが、例えば
ある条件を満たすまで、ある値に決まった値を足しつづける試行するループの表現をしたい場合の書き方についての相談です。
具体的には変動して決定されるfont-sizeに付随してline-heightを算出したいと思っています。
もしwhileがあるとしたら
$base-font-size = rem(16) !default $fz = $base-font-size $base-unit = (fzの値によって変動するなにかしらの式) $lh = $base-unit while ($lh - $fz) < $base-unit $lh = $lh + $base-unit font-size: $fz * 1rem line-height: $lh * 1rem
のような感じで、lhとfzの差がbase-unit一つ分以下にならないようにというか、line-heigthがfont-sizeより、最低でもbase-unit一つ分は大きく取りたい、思っています。
現状では、
math-minimum() for $count in 0..20 $lh = $lh + $base-unit if ($lh - $fz) >= $base-unit return $result = $lh font-size: $fz * 1rem line-height: math-minimum() * 1rem
math-minimum関数を作り、20回forで回してlhとfzの差がbase-unit一つ分より大きくなったらreturnで強制的にその時のlhの値を返すという、なんともスマートじゃないやり方です。
whileの代わりに、条件によるループや
回数や配列でのfor文ではなくて、while的に条件による繰り返しみたいな書き方はforでできるんでしょうか?
もしくは私の勘違いでそもそもStylusでwhileループ書けたりしますか?
追記
やはりWhileループは無いようですね。ifと関数を使った再帰的な書き方ができるような気がしてきました。再帰的な考え方が苦手なので答えはまだ出せてないですが。
解決したかもしれません
しばらく考えてみて再帰的に書けたので解決したかもしれません。しかしながらCSSはデバッグしにくいので正常に動いてるかが不安なところですので、どなたかアドバイスいただけると助かります。
具体的には
lh-calc($lh, $fz, $base-unit) if ($lh - $fz) >= $base-unit return $lh $lh = $lh + $base-unit return lh-calc($lh, $fz, $base-unit) font-size: $fz * 1rem line-height: lh-calc($lh, $fz, $base-unit) * 1rem
という感じで、条件を満たせばlhを返す、そうでなければbase-unitを足して再度メソッドを回す、というイメージです。一応今のところ意図した結果が得られていますが、果してこれで正解でしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/02 02:38