mirror of
https://github.com/danog/sass-site.git
synced 2024-12-14 18:37:35 +01:00
55 lines
1.4 KiB
Plaintext
55 lines
1.4 KiB
Plaintext
---
|
|
title: "@while"
|
|
introduction: >
|
|
The `@while` rule, written `@while <expression> { ... }`, evaluates its block
|
|
if its [expression](../../syntax/structure#expressions) returns `true`. Then,
|
|
if its expression still returns `true`, it evaluates its block again. This
|
|
continues until the expression finally returns `false`.
|
|
---
|
|
|
|
<% example do %>
|
|
@use "sass:math";
|
|
|
|
/// Divides `$value` by `$ratio` until it's below `$base`.
|
|
@function scale-below($value, $base, $ratio: 1.618) {
|
|
@while $value > $base {
|
|
$value: math.div($value, $ratio);
|
|
}
|
|
@return $value;
|
|
}
|
|
|
|
$normal-font-size: 16px;
|
|
sup {
|
|
font-size: scale-below(20px, 16px);
|
|
}
|
|
===
|
|
@use "sass:math"
|
|
|
|
/// Divides `$value` by `$ratio` until it's below `$base`.
|
|
@function scale-below($value, $base, $ratio: 1.618)
|
|
@while $value > $base
|
|
$value: math.div($value, $ratio)
|
|
@return $value
|
|
|
|
|
|
|
|
$normal-font-size: 16px
|
|
sup
|
|
font-size: scale-below(20px, 16px)
|
|
===
|
|
sup {
|
|
font-size: 12.36094px;
|
|
}
|
|
<% 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' %>
|