mirror of
https://github.com/danog/sass-site.git
synced 2024-12-14 18:37:35 +01:00
49 lines
1.2 KiB
Plaintext
49 lines
1.2 KiB
Plaintext
|
---
|
||
|
|
title: "@while"
|
||
|
|
---
|
||
|
|
|
||
|
|
The `@while` rule, written `@while <expression> { ... }`, evaluates its block if
|
||
|
|
its [expression][] returns `true`. Then, if its expression still returns `true`,
|
||
|
|
it evaluates its block again. This continues until the expression finally
|
||
|
|
returns `false`.
|
||
|
|
|
||
|
|
[expression]: ../syntax/structure#expressions
|
||
|
|
|
||
|
|
<% example do %>
|
||
|
|
/// Divides `$value` by `$ratio` until it's below `$base`.
|
||
|
|
@function scale-below($value, $base, $ratio: 1.618) {
|
||
|
|
@while $value > $base {
|
||
|
|
$value: $value / $ratio;
|
||
|
|
}
|
||
|
|
@return $value;
|
||
|
|
}
|
||
|
|
|
||
|
|
$normal-font-size: 16px;
|
||
|
|
sup {
|
||
|
|
font-size: scale-below(20px, 16px);
|
||
|
|
}
|
||
|
|
===
|
||
|
|
/// Divides `$value` by `$ratio` until it's below `$base`.
|
||
|
|
@function scale-below($value, $base, $ratio: 1.618)
|
||
|
|
@while $value > $base
|
||
|
|
$value: $value / $ratio
|
||
|
|
@return $value;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$normal-font-size: 16px
|
||
|
|
sup
|
||
|
|
font-size: scale-below(20px, 16px)
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
<% heads_up do %>
|
||
|
|
Although `@while` is necessary for a few particularly complex stylesheets, you're
|
||
|
|
usually better of using either [`@each`][] or [`@for`][] if either of them will
|
||
|
|
work. They're clearer for the reader, and often faster to compile as well.
|
||
|
|
|
||
|
|
[`@each`]: each
|
||
|
|
[`@for`]: for
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
<%= partial 'documentation/snippets/truthiness-and-falsiness' %>
|