SASS如何使用布尔值和布尔运算符?详细示例

2021年3月18日15:07:54 发表评论 654 次浏览

SASS支持布尔值:

  • true
  • false

它用于条件编译中, 表达式的计算结果为这些值之一。

为该变量分配一个布尔值:

$variable: true; or $variable: false;

在条件编译中的用法:我们可以在条件编译中使用布尔值。参见下面的示例, 我们在mixin中传递了true值, 以便将@if块进行编译。

SASS文件:

@mixin button-format( $round-button, $size ) {
    color: white;
    background-color: blue;
    width: $size;

    @if $round-button {
        height: $size;
        border-radius: $size / 2; 
    }
}

.mybutton {
    @include button-format(true, 100px);
}

编译的CSS文件:

.mybutton {
    color: white;
    background-color: blue;
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

布尔运算符

SASS具有三个布尔运算符, 两个是二进制的:

,

or

一元是一元的:

.

二进制运算符:

和:

语法如下:

expression1 and expression2

仅当两个表达式的计算结果均为true时, 最终的布尔值才为true, 否则为false。

要么:

语法如下:

expression1 or expression2

仅当任何一个表达式的计算结果为true时, 最终的布尔值才为true, 否则为false。

一元运算符:

不:

语法如下:

not expression

最终的布尔值将与表达式值相反。

请参阅以下示例:

$var1: true and true;
$var2: true and false;

$var3: true or false;
$var4: false or false;

$var5: not true;

// @debug will print the values of the variable 
// at the compilation time in the terminal.
//------------  values

@debug $var1;  // true
@debug $var2;  // false

@debug $var3;  // true 
@debug $var4;  // false

@debug $var5;  // false

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: