Booleanos

@use "sass:math";

@debug 1px == 2px; // false
@debug 1px == 1px; // true
@debug 10px < 3px; // false
@debug math.comparable(100px, 3in); // true

@use "sass:math"

@debug 1px == 2px  // false
@debug 1px == 1px  // true
@debug 10px < 3px  // false
@debug math.comparable(100px, 3in)  // true

Tu podes trabalhar com booleanos usando operadores booleanos. O operador and retorna true se ambos ambos lados forem true, e o operador or retorna true se um ou outro lado for true. O operador not retorna o oposto de um único valor booleano.

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

@debug not true; // false
@debug not false; // true

@debug true and true  // true
@debug true and false  // false

@debug true or false  // true
@debug false or false  // false

@debug not true  // false
@debug not false  // true

Usando BooleanosUsando Booleanos permalink

Tu podes usar booleanos para escolheres se fazes ou não várias coisas na Sass. A regra @if avalia um bloco de estilos se seu argumento for true:

@use "sass:math";

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: math.div($size, 2);
  }
}

.square-av {
  @include avatar(100px, $circle: false);
}
.circle-av {
  @include avatar(100px, $circle: true);
}

@use "sass:math"

@mixin avatar($size, $circle: false)
  width: $size
  height: $size

  @if $circle
    border-radius: math.div($size, 2)



.square-av
  @include avatar(100px, $circle: false)

.circle-av
  @include avatar(100px, $circle: true)

.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

A função if() retorna um valor se seu argumento true e um outro se seu argumento for false:

@debug if(true, 10px, 30px); // 10px
@debug if(false, 10px, 30px); // 30px

@debug if(true, 10px, 30px)  // 10px
@debug if(false, 10px, 30px)  // 30px

Veracidade e FalsidadeVeracidade e Falsidade permalink

Em qualquer parte que true ou false forem permitidos, podes usar outros valores também. Os valores false e null são falsos, o que significa que a Sass considera-os para indicar falsidade e motivos de condições falharem. Todo outro valor é considerado verdadeiro, então a Sass considera-os para funcionar como true e motivo das condições serem bem-sucedidas.

Por exemplo, se quiseres verificar se uma sequência de caracteres contém um espaço, podes apenas escrever string.index($string, ""). A função string.index() retorna null se a sequência de caracteres não for encontrada e de outro modo um número.