SASS Values - All SCSS Value Types

What are SASS Values?

SCSS values are the data type, that we can utilize as SASS language variables or assign to various CSS properties. For developing a dynamic and designing flexible stylesheet, SASS provides the following type of values that we can work with.

1. Number Values
2. String Values
3. Color Values
4. List of Values
5. Boolean Values
6. Null Value
7. Map Values
8. Calculations
9. Function References

1. SASS Number Values

In SCSS coding, we can utilize the number values in two different ways, as per the type of property. We can use the numbers with or without units.

@debug 20; // 20
@debug 12px; // 12px
@debug 12e2; // 1200

2. SASS String Values

We need to include strings with or without quotes in SCSS programs for various purposes. While writing SCSS style rules, we can include string values as follows.

@debug "Courier New"; // "Courier New"
@debug italic; // italic

3. SASS Color Values

In SCSS programming, we can use colors by three different methods. We can include SCSS color values by using Name, HEX code, or color Functions. Check the below instance to understand this concept.

@debug red; // #ff0000
@debug #ff0000; // #ff0000
// Using color functions
@debug rgb(255, 0, 0); // #ff0000
@debug hsl(0, 100%, 50%); // #ff0000

4. SASS List of Values

A SCSS program can have a list of values in which the elements are separated by commas. Consider the following example to comprehend the list of values.

@debug list.nth(20px 12px 40px, 3); // 40px
@debug list.nth([a1, a2, a3, a4], -1); // a4

5. SASS Boolean Values

If we want logical values in SCSS, we can incorporate booleans in our code. A boolean can have either a true or false value.

@debug 2px == 3px; // false
@debug not false; // true
@debug if(true, 20px, 10px); // 20px

6. SASS Map Values

Map values in SCSS have a key-value pair, and each key has a corresponding value. All the keys in a map must be unique and must not repeat. Consider the example below.

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

@debug map.get($weights, "medium"); // 500
@debug map.get($weights, "extra-bold"); // null

7. SASS Null Value

Functions in SCSS programming, often return a NULL value, and it is the only value of its type. It actually denotes the absence of a value.

$weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map.get($weights, "extra-bold"); // null

8. SASS Calculations

SCSS uses the calc() function to perform calculations, which works almost similarly to the CSS calc() function. There are other functions like clamp(), min(), and max() to simplify the values in our programs.

@debug calc(200px / 2); // 50px

9. SASS Function References

SCSS allows us to use functions as values, but we can't do this directly. For this purpose, we can pass a function’s name to the meta.get-function() function to get it as a value. After that, we can retrieve the function value using the meta.call() function.