Sass - Data Types

SassScript includes seven different data types: numbers, strings, colors, Booleans, null, lists & maps. We'll look at the details and peculiarities of each below.

Number

SassScript recognizes a single numeric data type, so you needn't worry about whether a given operation will result in an integer or a real. But it does recognize standard units such as em or px, and when performing an operation on numeric values, the unit must be the same or compatible.

For example, the following operations are valid:

test: 10 + 3;    //"plain" numbers added together
test: 10px + 3;  //"plain" number added to a pixel value
test: 10em + 3em; //two "em" values added together

But test: 10px + 2em; operation will result in an error because pixels and ems are not compatible.

Assuming that the operation is valid (pixels and pixels, for example), SassScript will preserve the unit in its output. For example, this code:

p {
   font-size: 3em * 1.5;
}

will result in the following CSS:

p {
   font-size: 4.5em;
}

with the "em" unit preserved.

String

You can create strings in SassScript with double quotes "string", single quotes 'string', or no quotes at all, string. In general, whatever form you use will be passed on to the CSS directly. Thus

$default-font: 'Lucida';

p {
    font-family: $default-font, "Ariel", sans-serif;
}

Would be output as

p {
    font-family: 'Lucida', "Ariel", sans-serif;
}

The only exception to this rule is when you use interpolation to pass a variable to a selector. Interpolation uses a special syntax, #{<var>} to "unwrap" the contents of the variable, and as part of that it removes any quotation marks. Let's look at an example:

$class-name: "foo";

a.#{$class-name} {
   color: blue;
}

results in

a.#foo {
   color: blue;
}

Don't worry if this doesn't make a lot of sense yet. Interpolation is primarily used with mixins, and we'll look at the whole process in more detail in the mixins chapter.

Color

SassScript supports the same color expressions that are supported by CSS: hex values such as #0000, named values such as red, rgb expressions like rgb(100, 39, 153), rgba expressions such as rgba(100, 39, 153, 75), hsl expressions such as hsl(0, 30%, 100%), and hsla expressions such as hsla(0, 30%, 100%, 0.3).

In other words, you specify colors to SassScript in exactly the same way as you do for CSS. (But you have some very handy color functions that we'll examine in the Color Functions chapter.)

List

A SassScript list is a series of values separated by either spaces or commas. The contents of both of the following variables will be treated as lists by SassScript:

$body-font: Helvetica, Arial, sans-serif;
$body-margin: 0 0 10px 15px;

Lists don't have to contain simple values; they can contain other lists:

$random-list: 10, 10 0, 3;

In this case, contains three items, not four as you might expect. The second item is a second list, . SassScript considers 10 0 a nested list item because it's separated by a space, while the values in main list, $random-list, are separated by commas.

That's pretty confusing, isn't it? Easy to get wrong. That's why it's best practice to wrap nested lists in parentheses:

$random-list: 10, (10 0), 3;

This syntax makes it clear that the second item is a nested list. You can also use parentheses as placeholders for an entire list or for individual elements:

$empty-list: ();
$missing-list: 10px () 30px 0;

Since CSS doesn't understand them, the Sass transpiler will strip the parentheses from the CSS it outputs. This can lead to some unexpected side-effects if you're not careful. For example, $missing-list in the example above would be output as 10px 30px 0, which probably isn't what you wanted.

Map

In SassScript, maps are key-value pairs. Their syntax is slightly different from a list: They must be comma-separated, and the entire map must be wrapped in parentheses:

$red-map: (light: #e57373, medium: #f44336, dark: #b71c1c);

Maps are never output directly to the CSS; it wouldn't know what to do with them. Instead, you'll use the map functions to retrieve values. We'll examine map functions in detail in the Sass Functions chapter, but here's a quick example:

$red-map: (light: #e57373, medium: #f44336, dark: #b71c1c);

p {
   color: map-get($red-map, light);
}

The map-get() function takes a map and a key and returns the value of that key. In this case, the CSS would be:

p {
   color: $e57373;
}

Booleans & Nulls

SassScript supports two Boolean values, true and false, as well as the null value, null. These have no direct meaning in CSS, but they're useful in combination with the control directives discussed in the next chapter.