SASS | Booleanos y operadores booleanos

SASS admite valores booleanos:

• verdadero
• falso

Se usa en la compilación condicional donde la expresión se evalúa como cualquiera de estos valores.

Asigne un valor booleano a la variable:

$variable: true; or $variable: false;

Uso en compilación condicional: Podemos usar valores booleanos en compilación condicional. Vea el ejemplo a continuación, hemos pasado un valor verdadero en el mixin para que se compile el bloque @if.

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

Archivo CSS compilado:

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

Operadores booleanos:
SASS tiene tres operadores booleanos, dos son binarios: and, ory uno es unario: not.

Operadores binarios:

1. y:

   Sintaxis:

   expression1 and expression2

   El valor booleano final será verdadero solo si ambas expresiones se evalúan como verdaderas; de lo contrario, será falso.

2. o:

   Sintaxis:

   expression1 or expression2

   El valor booleano final será verdadero solo si alguna de las expresiones se evalúa como verdadera; de lo contrario, será falso.

Operador unario:

• no:

  Sintaxis:

  not expression

  El valor booleano final será el opuesto del valor de la expresión.

Vea el ejemplo a continuación:

$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