• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • @while

    @while规则,写为@while<expression>{…},如果其表达式返回true,则对其块求值。然后,如果其表达式仍返回true,则再次计算其块。直到表达式最终返回false为止。

    scss 语句css 语句
    @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;
    }
    
    ⚠️注意!
    尽管@while对于一些特别复杂的样式表是必需的,但您通常最好使用其中任何一个,@each或者@for如果它们中的任何一个都可以工作。它们对读者来说更清楚,而且通常编译起来也更快。


    真与假

    任何允许truefalse的地方,都可以使用其他值。值falsenull为假,这意味着 Sass 认为它们表示错误并导致条件失败。所有其他价值观都被认为是真实的,因此 Sass 认为它们像真实的一样工作,并创造成功的条件。

    例如,如果要检查字符串是否包含空格,则只需编写string.index($string,"")。如果未找到该字符串,则该string.index()函数,返回null,否则返回一个数字。

    ⚠️注意!
    一些语言认为更多的值是虚假的,而不仅仅是falsenull。Sass 不是其中一种语言!空字符串空列表和数字0,在 Sass 中都是真值。

    上篇:@for