Boolean Operators
Unlike languages like JavaScript, Sass uses words rather than symbols for its boolean operators.
not <expression>
returns the opposite of the expression’s value: it turnstrue
intofalse
andfalse
intotrue
.<expression> and <expression>
returnstrue
if both expressions’ values aretrue
, andfalse
if either isfalse
.<expression> or <expression>
returnstrue
if either expression’s value istrue
, andfalse
if both arefalse
.
SCSS Syntax
@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
Sass Syntax
@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
Truthiness and FalsinessTruthiness and Falsiness permalink
Anywhere true
or false
are allowed, you can use other values as well. The
values false
and null
are falsey, which means Sass considers them to
indicate falsehood and cause conditions to fail. Every other value is considered
truthy, so Sass considers them to work like true
and cause conditions to succeed.
For example, if you want to check if a string contains a space, you can just
write string.index($string, " ")
. The string.index()
function returns
null
if the string isn’t found and a number otherwise.
⚠️ Heads up!
Some languages consider more values falsey than just false
and null
. Sass
isn’t one of those languages! Empty strings, empty lists, and the number 0
are
all truthy in Sass.