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

I am doing BTech at Dhirubhai Ambani Institute of Information and Communication Technology

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.