113

SASS Operations

In Sass, you can use different operators to do operations like concatenating strings, concatenating colors etc.

---

SASS Concatenating Strings

The addition (+) operator is used to concatenate two strings. We have to follow some rules for concatenating two strings.

Rules:

• If you add a quoted string (specified before the + operator) with an unquoted string, the result is displayed in quoted string.
• If you add an unquoted string (specified before the + operator) with a quoted string, the result is displayed in unquoted string.

See this example:

After compilation, the resulting CSS will have the following code.

---

SASS Concatenating Colors

We can also use addition operator (+) to produce a new color value. Let’s take an example.

Sass Syntax:

After the compilation, the resulting CSS will have the following code:

CSS:

Sass performs corresponding calculation on color pairs and after concatenation a new color value is formed.

Hex values are a combination of red, green, and blue color values. They are represented by the numbers 0-9 and the letters A-F.