Sass Data Types — Numbers, Strings, Colors, Lists, Maps

In this tutorial, you will learn about Sass Data Types. We cover key concepts, practical examples, and best practices to help you master this topic.

Sass data types include numbers (with units), strings, colors, booleans, null, lists (arrays), and maps (key-value pairs) for flexible value handling in stylesheets.

What You'll Learn

You will learn the seven Sass data types, how to work with lists and maps, perform operations on numbers and colors, and test data types with built-in functions.

Why It Matters

Understanding data types enables advanced Sass patterns. DodaTech uses maps for breakpoints and lists for multiple font stacks.

Real-World Use

Durga Antivirus Pro uses a Sass map for color themes, enabling dynamic generation of light and dark mode styles from a single data structure.

flowchart LR
    A[Variables] --> B[Data Types]
    B --> C[Numbers]
    B --> D[Strings]
    B --> E[Colors]
    B --> F[Lists]
    B --> G[Maps]
    style B fill:#c69,stroke:#c69,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Numbers and Units

$length: 16px;
$ratio: 1.5;
$percentage: 50%;
$negative: -10px;

// Arithmetic
$sum: 10px + 20px;    // 30px
$diff: 100px - 20px;  // 80px
$product: 3 * 10px;   // 30px

// Division (requires parentheses or variables)
$ratio: (100px / 2);  // 50px
$scale: $length / 2;  // 8px

// Unit conversion
$width: 1in + 10px;   // Error — incompatible units

Expected output: Numbers keep their units through operations. Different absolute units cannot be mixed.

Strings

$name: "Doda Browser";  // Quoted string
$class: .button;         // Unquoted string (CSS identifier)

// String interpolation
$component: "card";
.#{$component} {
  font-family: "Inter", sans-serif;
  content: "Hello, #{$name}";
}

Expected output: The class name .card is dynamically generated. The content property includes the variable value.

Colors

// Named colors
$color: red;

// Hex
$hex: #7c3aed;
$hex-short: #fff;

// RGB
$rgb: rgb(124, 58, 237);
$rgba: rgba(124, 58, 237, 0.5);

// HSL
$hsl: hsl(271, 83%, 58%);
$hsla: hsla(271, 83%, 58%, 0.5);

Expected output: All color formats compile to the appropriate CSS color syntax.

Lists

Lists store multiple values separated by spaces or commas:

// Space-separated
$padding: 10px 20px 10px 20px;

// Comma-separated
$fonts: "Inter", "Roboto", sans-serif;

// Accessing items (1-indexed)
$first: nth($fonts, 1);    // "Inter"
$last: nth($fonts, 3);     // sans-serif

// List length
$count: length($padding);  // 4

// Appending
$fonts: append($fonts, "Poppins");

Expected output: Lists compile correctly when used in CSS values like padding and font-family.

Maps

Maps store key-value pairs enclosed in parentheses:

// Map declaration
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

// Accessing values
$md-value: map-get($breakpoints, md); // 768px

// Adding to a map
$breakpoints: map-merge($breakpoints, (xxl: 1400px));

// Checking keys
$has-lg: map-has-key($breakpoints, lg); // true

// Map keys
$keys: map-keys($breakpoints); // sm, md, lg, xl

// Map values
$values: map-values($breakpoints); // 576px, 768px, 992px, 1200px

Expected output: A structured data map that can be iterated in loops and accessed via key lookups.

Booleans and Null

$debug: true;
$use-grid: false;
$no-value: null;

@if $debug {
  body { outline: 1px solid red; }
}

// Testing for null
@if $no-value == null {
  // true — $no-value is null
}

Expected output: The debug outline appears only when $debug is true.

Type Checking

$value: 16px;

$is-number: type-of($value);    // number
$is-color: type-of(#fff);       // color
$is-string: type-of("hello");   // string
$is-list: type-of((1, 2, 3));   // list
$is-map: type-of((a: 1));       // map
$is-bool: type-of(true);        // bool

Expected output: Each type-of call returns the data type name as a string.

Common Mistakes

1. List Index Starting at 0

Sass lists are 1-indexed, not 0-indexed. nth($list, 1) returns the first item.

2. Confusing Lists and Maps

(a: 1, b: 2) is a map. (a, b) is a list. Maps have colons between keys and values.

3. Incompatible Units in Operations

Adding px and em without conversion causes an error. Use compatible units or convert first.

4. Not Using Null Properly

null in a CSS property value removes the declaration entirely. Use it conditionally.

5. Forgetting Map Syntax

Maps use parentheses with colons: (key: value). Access with map-get($map, key).

Practice Questions

1. What data type is rgb(124, 58, 237)? Color type. All CSS color formats are color types in Sass.

2. How do you access the second item in a list? nth($list, 2) returns the second item (lists are 1-indexed).

3. What function retrieves a value from a map? map-get($map, $key) returns the value for the given key.

4. What does type-of(16px) return? "number" — even with a unit, it is the number type.

5. How do you check if a key exists in a map? map-has-key($map, $key) returns true or false.

Challenge

Create a map of theme colors (primary, secondary, success, danger, warning, info) and a separate spacing map (xs through xl). Write SCSS that generates utility classes for each color and spacing value using loops.

FAQ

Mini Project

Build a configuration map for a button component with keys for padding, font-size, border-radius, background-color, and text-color. Write a mixin that reads from the map and generates button styles.

What's Next

Learn Sass Nesting for cleaner selector hierarchies. Then explore the Parent Selector for referencing parent selectors.