SASS Supported Value Types

SASS supports different value types that are used in defining styling rules in stylesheets. Most of the value types supported in SASS/SCSS comes directly from CSS.

Understanding value types is very important because all the variables hold values, all the expressions evaluate to values, all the operators operate on values, so in this tutorial, we will cover all the value types supported in SASS/SCSS.

The following are the value types supported in SASS/SCSS:

1. Numbers

2. Strings

3. Colors

4. Boolean values

5. null values

6. List of Values

7. Maps

Let's take a few examples for every value type to understand when and where they are used.

SASS Numbers

SASS Numbers are numerical values with or without a unit. SASS supports all the units supported in CSS.

Here are a few examples,

@debug 100; /* 100 */
@debug 0.8; /* 0.8 */
@debug 16px; /* 16px */

SASS Numbers: Units

SASS automatically performs conversion for similar units while performing any operation on them. Also, if we multiply or divide two numbers of different units or the same units the operation is also performed on their units, so px * px becomes px square.

Let's take an example:

@debug 4px * 6px; /* 24px*px (read "square pixels") */
@debug 5px / 2s; /* 2.5px/s (read "pixels per second") */

Also, as mentioned above when performing operation on compatible units, SASS automatically coverts them, and for incompatible versions, SASS will give an error.

/* CSS defines one inch as 96 pixels. */
@debug 1in + 6px; /* 102px or 1.0625in */

@debug 1in + 1s;

/*     ^^^^^^^^
* Error: Incompatible units s and in.
*/

SASS Strings

SASS strings are nothing but a sequence of characters. SASS supports quoted strings, which is nothing but a sequence of characters enclosed within single or double quotes and unquoted strings which are CSS identifiers like bold, etc.

Let's take a few examples,

@debug "Helvetica Neue"; /* "Helvetica Neue" */
@debug bold; /* bold */

To escape any string character we can use the \ symbol. For example,

@debug "\""; /* '"' */
@debug \.widget; /* \.widget - dot symbol escaped */

SASS Colors

Just like CSS, there are many different ways for representing colors in the stylesheet in SASS/SCSS too. Sass colors can be written as hex codes (#f2ece4 or #b37399aa), CSS color names (midnightblue, transparent), or the functions rgb(), rgba(), hsl() and hsla().

Let's take a few examples,

@debug #f2ece4; /* #f2ece4 */
@debug #b37399aa; /* rgba(179, 115, 153, 67%) */
@debug midnightblue; /* #191970 */
@debug rgb(204, 102, 153); /* #c69 */
@debug rgba(107, 113, 127, 0.8); /* rgba(107, 113, 127, 0.8) */
@debug hsl(228, 7%, 86%); /* #dadbdf */
@debug hsla(20, 20%, 85%, 0.7); /* rgb(225, 215, 210, 0.7) */

SASS Boolean: true and false

SASS Boolean are logical values true and false. These are generally a result of using the equality or relational operators. Let's take a few examples,

@debug 1px == 2px; /* false */
@debug 1px == 1px; /* true */
@debug 10px < 3px; /* false */

SASS Boolean values are useful while writing expressions to be used in @if and @else at-rules for controlling the flow control based on conditions.

SASS null

The value null is the only value of its type. It represents the absence of a value and is often returned by functions to indicate the lack of a result. For example,

@debug &; /* null */

SASS List

Yes, SASS supports List and also provides at-rule for iterating over these lists, like @for, @each and @while at-rules. Values stored inside a list should be separated by commas or spaces as long as they are consistent.

You can define lists by enclosing values between square brackets or even without brackets.

A SASS List can have zero value, one value or more than one value. Also, Lists in SASS are immutable, which means once defined they never change values, every time you change any value, a new list gets created.

While defining mixins or functions you can define Lists are arguments.

Let's take an example:

$listvar: 1, 2, 3;

/* using square barackets */

$sides: ["left", "right", "top", "bottom"];

SASS Maps

SASS Maps hold key-value pairs, where value can be accessed using the keys. Following is the syntax to create a map in SASS:

(<expression>: <expression>, <expression>: <expression>)

The expression which is before the : is the key, and the expression after is the value associated with that key. The keys must be unique, but the values may be duplicated.

Also, to define a map parentheses () are required. To define an empty map, we use ().

SASS Maps are also immutable.

Let's take an example,

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

So these are the various different value types supported in SASS/SCSS which you can use while writing your dynamic stylesheet with mixins and function and flow control and loops. There is so much that you can do with SASS.