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

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

---