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 Falsiness permalinkTruthiness and Falsiness
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.