Skip to content
Related Articles

Related Articles

SASS | Booleans and Boolean operators
  • Last Updated : 11 Oct, 2019

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
Recommended Articles
Page :