• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 布尔值(Booleans)

    布尔值是逻辑值truefalse。除了它们的文字形式之外,布尔值还由相等和关系运算符以及许多内置函数(如:math.comparable()map.has-key())返回。

    @use "sass:math";
    
    @debug 1px == 2px; // false
    @debug 1px == 1px; // true
    @debug 10px < 3px; // false
    @debug math.comparable(100px, 3in); // true
    

    您可以使用布尔运算符来处理布尔值。如果两边都是true,则and运算符返回true。如果一侧为true,则or运算符返回truenot运算符返回与单个布尔值相反的值。

    @debug true and true; // true
    @debug true and false; // false
    
    @debug true or false; // true
    @debug false or false; // false
    
    @debug not true; // false
    @debug not false; // true
    


    使用布尔值

    您可以使用布尔值,来选择是否,在 Sass 中执行各种操作。如果其参数是true,则该@if规则评估样式块:

    scss 语句css 语句
    @mixin avatar($size, $circle: false) {
      width: $size;
      height: $size;
    
      @if $circle {
        border-radius: $size / 2;
      }
    }
    
    .square-av {
      @include avatar(100px, $circle: false);
    }
    .circle-av {
      @include avatar(100px, $circle: true);
    }
    
    .square-av {
      width: 100px;
      height: 100px;
    }
    
    .circle-av {
      width: 100px;
      height: 100px;
      border-radius: 50px;
    }
    

    if()函数在其参数为true时返回一个值,在其参数为false时返回另一个值:

    @debug if(true, 10px, 30px); // 10px
    @debug if(false, 10px, 30px); // 30px
    


    真与假

    在任何允许truefalse的地方,您也可以使用其他值。falsenull的值是falsey,这意味着 Sass 认为它​​们表示错误并导致条件失败。其他所有值都被认为是真实的,因此 Sass 认为它​​们的工作方式类似true并导致条件成功。

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

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

    上篇:地图(Maps)

    下篇:null 值