SASS | Booleans and Boolean operators
SASS supports boolean values:
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:
-
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.
-
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:
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
Last Updated :
11 Oct, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...