Sass Operators

In the previous chapter, we explored the types of data that SassScript understands. In this chapter, we'll explore the operations you can perform on each data type. Most of them behave as you'd expect, but there are a few things that you need to be aware of because Sass needs to remain compatible with CSS which isn't, after all, a scripting language.

Equality Operations

SassScript supports one operation for all data types: equality. You can compare any two values using the == and != operators, which return a Boolean value:

2 == 3 //false
2 != 3 //true

The examples use numeric values, but you can compare any data types:

$a: bold;
$b: italic;
$a == $b /* false */
$a != $b /* true */

In performing Boolean operations, SassScript respects data types, as in this example:

2 == "2" /* false */
"true" == true /* false /

This operation returns false because the first operand is a number and the second is a string. You won't use the equality operator too often in your Sass code, but you'll need it when you start using the control directives chapter.

Boolean operations

Like the equality operations, Boolean operators return a Boolean value (true or false). Sass supports three Boolean operators: and, or and not.

The and operator returns true only if both of its operands are true:

true and true //returns true
true and false //returns false

The or operator returns true if either of operands are true:

true or false //returns true
true or true //returns true
false or false //returns false

Sass does not support the "exclusive or" operation, which returns true if only one of its operands is true, but you can build an exclusive or from the existing operations:

true and not (true and true)//returns false

The final Boolean operator, not is used in the previous example. It simply inverts the truth or falseness of a Boolean value:

not true  //false
not false //true

Numeric Operations

SassScript allows you to perform arithmetic and comparison operations on numeric values. For the most part the operators perform the way you'd expect them to, but because Sass supports the full syntax of CSS, and CSS is a declarative rather than procedural language, there are a few places where the syntax can be a little tricky. Let's take a look.

Basic Arithmetic

SassScript supports all the standard arithmetic operations for numeric values:

1 + 1   //2 (addition)
1 - 1   //0 (subtraction)
2 * 3   //6 (multiplication)
(6 / 3) //2 (division, see below for an explanation of the parentheses)
5 % 2   //5 (modulus)
-3      //3 less than zero (negation)

Note that I've included spaces around the operators, but this isn't necessary, so 1 + 1 is same as 1+1.

Unfortunately, the requirement that Sass be compatible with CSS syntax complicates the algebraic operators in a couple of ways. The first is the division operator. Although it's not common practice, CSS allows the character to be used to separate numbers, so Sass must respect that. If I had written without the parentheses, the transpiler would output that as a string rather than evaluating the expression.

The solution is to simply surround part of the expression, or the whole expression, with parentheses:

(6) / 3 //only one number needs to be parenthetical
(6 / 3) //surrounding the whole expression is usually more readable

But the problem only occurs if both operands are simple numeric values. If either operand is a variable or the result of a function, the Sass transpiler will know how to handle it. It will also know what to do if the division is part of a larger expression. So all of the following will work just fine:

$var / 3
12 / round(2.5)
12 / 4 + 7

You also have to be careful with the - operator because it actually represents two different operations: subtraction and negation. The solution in this case is to be careful about where you put spaces. A space on both sides of the operator indicates subtraction:

5 - 2 //subtraction

No spaces also indicates subtraction:

5-2 //subtraction

But if you only include one space, you get a list with a negative value:

5 -2 //this is a list with two items

Comparison

In addition to the comparison for equality that's valid for all data types, SassScript also supports comparing two values. Like the == and != operators, all of these return a Boolean value:

5 < 3  //false (less than)
5 > 3  //true (greater than)
3 <= 3 //true (less than or equal to)
5 >= 3 //true (greater than or equal to)

In this instance, the Sass operators don't conflict with standard CSS syntax, so there's no special conditions or syntax to worry about.

String Operations

Sass only supports a single operator on strings, concatenation, but it supports several varieties of it. The simplest is the concatenation operator, :

"hello, " + "world"  // returns "hello, world"

The Sass transpiler will determine whether to quote the string based on the first operand:

p {
   content: "Hello " + world;
   font-family: sans + "-serif";
}

will be output as:

p {
   content: "Hello world";
   font-family: sans-serif;
}

You can use expressions in strings by wrapping them in the interpolation operator, #{}.

#plain-text {
   content: "I'm 1 + 2 years old";
}

#interpolated {
   content: "I'm #{1 + 3} years old";
}

will be transpiled to:

#plain-text {
   content: "I'm 1 + 2 years old";
}

#interpolated {
   content: "I'm 4 years old";
}

Color Operations

SassScript allows you to perform arithmetic between two colors or between a color and a numeric value. Because of the way RGB color works, these operations are rarely useful, but it's nice to know they're available if you should ever need them. (As we'll see in the next chapter, SassScript provides color functions that are much more straightforward to use.)

When performing arithmetic on two color values, Sass separates each color into its red, green and blue components and then performs on each color separately. Let's look at an example. Given the following expression:

#102030 + #010203

Sass will first break the two colors into their red, green and blue components: (10,20,30) and (01,02,03). Then it will perform the operation (in this case, addition) on each color: 10+1 for red, 20 + 2 for the green, and 30 + 3 for the blue. It will then re-combine the values, with the result #112233.

Sass does essentially the same thing when you perform an operation on a color and a number: The operation is performed on each color component individually. Thus given the expression #101010 * 2 the result would be #202020.

The examples here use hex format for the colors, but you can also use rgb, rgba, hsl and hsla. There is one caveat: If the color format you use includes an alpha value (rgba or hsla), the alpha values must be the same, and they won't be included in the calculation:

rgba(55, 160, 0, .5) + rgba(10, 0, 0, .5); //rgba(65, 160, 0, 0.5)
rgba(55, 160, 0, .5) + rgba(10, 0, 0, 1);  //syntax error