Sass Data Types

SassScript includes seven different data types: numbers, strings, colors, Booleans, null, lists and maps.

We'll look at the details and peculiarities of each below.

DataTypes

Data Type	Description
Number	It represents integer types.
String	It is sequence of characters defined within single or double quotes.
Color	It is used for defining color value.
Boolean	It provides operations such as number, color, string, boolean and list operations.
Null	It specifies null value which is unknown data.
List	It specify multiple values which are separated using spaces or commas.
Map	It maps from one value to another value.

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

Example:

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

note

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.

For example:

$default-font: 'Lucida';

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

and the output would be:

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;
}

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).

Boolean

Booleans are the logical values true and false. In addition, their literal forms, booleans are returned by equality and relational operators, as well as many built-in functions

They're useful in combination with the control directives discussed in next chapters.

@use "sass:math";

@debug 1px == 2px; // false
@debug 1px == 1px; // true
@debug 10px < 3px; // false
@debug math.comparable(100px, 3in); // true

note

Anywhere true or false are allowed, you can use other values as well.

The values false and null are falsy, 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.

Null

Null is used to specify unknown data.

This is useful in combination with the control directives discussed in next chapters.

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.

note

Best practice is to wrap nested lists in parentheses

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

Note 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. You'll use the map functions to retrieve values.

For example: map-get()

$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;
}