SASS | Booleans and Boolean operators

SASS supports boolean values:

• true
• false

It is used in conditional compilation where the expression evaluates to either of these values.

Assign a boolean value to the variable:

$variable: true; or $variable: false;

Usage in Conditional Compilation: We can use boolean values in conditional compilation. See the example below, we have passed a true value in the mixin so that the @if block will be compiled.

SASS file:

@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);
}

Compiled CSS file:

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

Boolean Operators:
SASS has three boolean operators two are binary: and, or and one is unary: not.

Binary Operators:

1. and:

   Syntax:

   expression1 and expression2

   The final boolean value will be true only if both the expressions evaluate to true otherwise it will be false.

2. or:

   Syntax:

   expression1 or expression2

   The final boolean value will be true only if any of the expressions evaluates to true otherwise it will be false.

Unary Operator:

• not:

  Syntax:

  not expression

  The final boolean value will be the opposite of the expression value.

See the example below:

$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

My Personal Notes arrow_drop_up

Save