Introduction to Sass & SCSS Data types

Sass and SCSS extend CSS with variables, functions, nesting, and programmatic features that speed up stylesheet development. Knowing the available data types helps you pick the right value and avoid unexpected results or errors.

In this tutorial we will learn the core Sass data types, how they behave, and practical tips to use them effectively.

What are Sass Data Types?

Data types are the categories of values that Sass and SCSS understand and operates on. Each type defines what operations and functions can be applied to a value.

There are total 7 data types in Sass and SCSS:

  1. Numbers
  2. Strings
  3. Colors
  4. Booleans
  5. Null
  6. Lists
  7. Maps

Why data types matter in Sass

Using the right data type in Sass and SCSS ensures values work accurately in calculations and functions. It makes your code easier to read and helps avoid errors.

  • They determine which arithmetic and comparison operations make sense.
  • They influence the behavior of functions.
  • They affect interpolation and how values are emitted in the compiled CSS.
  • They enable predictable conditional logic in mixins and control directives.
  • They help you organize complex values for reuse and composition.

Number Data Type

  • Numbers represent numeric values with or without units
  • Common units include px, em, rem (see complete CSS units)
  • Unitless numbers are valid and useful for multipliers and z-index
  • Numbers support arithmetic such as addition, subtraction, multiplication, and division
  • Use numbers for sizes, spacing, durations, transforms, and calculations in mixins
  • Avoid mixing incompatible units without explicit conversion to prevent errors

Number Data Type Example

SCSS Code
Sass Code
CSS Code
$base: 16px;
$gap: $base * 1.5; // 24px
$ratio: 1.5;
$half: 50%;
$progress: percentage(0.33); // 33%

.card {
	padding: $gap;
	font-size: $base;
	margin-top: $base * 2;
	line-height: $ratio;
	width: $half;
	z-index: 10;
	--progress: $progress;
}

/* inspect units */
$base-unit: unit($base); // "px"
$is-ratio-unitless: unitless($ratio); // false

$base: 16px
$gap: $base * 1.5
$ratio: 1.5
$half: 50%
$progress: percentage(0.33)

.card
	padding: $gap
	font-size: $base
	margin-top: $base * 2
	line-height: $ratio
	width: $half
	z-index: 10
	--progress: $progress

$base-unit: unit($base)
$is-ratio-unitless: unitless($ratio)

String Data Type

  • Text values, quoted or unquoted, used for labels and selectors
  • Supports single quotes, double quotes, and unquoted words
  • Interpolation with #{} injects values into strings and selectors
  • Useful for generated class names, content, and concatenation
  • Escape sequences and quotes must be handled when embedding characters

String Data Type Example

SCSS Code
Sass Code
CSS Code
$name: "John Doe";
$greeting: "Hello, #{$name}!";
$badge: unquote("badge-#{$name}");

.card {
    content: $greeting;
    // use generated class via interpolation
    &.#{$badge} {
        padding: 8px;
    }
}

$name: "John Doe"
$greeting: "Hello, #{$name}!"
$badge: unquote("badge-#{$name}")

.card
    content: $greeting
    &.#{$badge}
        padding: 8px

Color Data Type

  • Accepted formats include hex, rgb, rgba, hsl, and hsla
  • Colors can be stored in variables and reused, for consistency
  • Useful for themes, states, gradients, and for programmatic palettes
  • Use color math carefully to preserve contrast and accessibility

Color Data Type Example

SCSS Code
Sass Code
CSS Code
$primary: #1e90ff;
$accent: rgba($primary, 0.85);
$hover: lighten($primary, 12%);

.button {
    background: $primary;
    color: #fff;
    border: 1px solid darken($primary, 8%);
    &:hover {
        background: $hover;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }
}

$primary: #1e90ff
$accent: rgba($primary, 0.85)
$hover: lighten($primary, 12%)

.button
    background: $primary
    color: #fff
    border: 1px solid darken($primary, 8%)
    &:hover
        background: $hover
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12)

Boolean Data Type

  • Used for logic and toggles and has two possible values: true or false
  • Common in conditional mixins, feature flags, and control flow
  • Can be combined with default arguments for optional behavior
  • Booleans do not print in CSS, they only affect compiled output
  • Prefer clear variable names like $is-enabled, $use-grid, $is-rtl

Boolean Data Type Example

SCSS Code
Sass Code
CSS Code
$is-compact: false;
$show-badge: true;

.card {
    padding: 16px;
    @if $is-compact {
        padding: 8px;
    }
    @if $show-badge {
        .badge {
            display: inline-block;
        }
    } @else {
        .badge {
            display: none;
        }
    }
}

$is-compact: false
$show-badge: true

.card
    padding: 16px
    @if $is-compact
        padding: 8px
    @if $show-badge
        .badge
            display: inline-block
    @else
        .badge
            display: none

Null Data Type

  • Represents absence of a value, used as a deliberate blank
  • Works as false in conditions, and does not print in CSS
  • Useful for default fallbacks, optional arguments, and resets
  • Use null to remove or skip values when building lists or maps

Null Data Type Example

SCSS Code
Sass Code
CSS Code
$theme-color: null;
$bg: if($theme-color == null, #f5f5f5, $theme-color);

.card {
    background: $bg;
    // null used as optional modifier
    $badge: null;
    @if $badge {
        .badge { display: inline-block; }
    } @else {
        .badge { display: none; }
    }
}

$theme-color: null
$bg: if($theme-color == null, #f5f5f5, $theme-color)

.card
    background: $bg
    $badge: null
    @if $badge
        .badge
            display: inline-block
    @else
        .badge
            display: none

List Data Type

  • Ordered values, separated by spaces or commas
  • Comma vs space affects how CSS is emitted, choose intentionally
  • Use lists for multiple property values, responsive breakpoints, and color sets

List Data Type Example

SCSS Code
Sass Code
CSS Code
$spacing: 4px 8px 16px;          // space separated list
$colors: red, green, blue;       // comma separated list

.container {
    padding: nth($spacing, 3);   // 16px
    border-colors: $colors;
    $colors-extended: append($colors, yellow); // red, green, blue, yellow
    gap: nth($spacing, 2);
}

$spacing: 4px 8px 16px
$colors: red, green, blue

.container
    padding: nth($spacing, 3)
    border-colors: $colors
    $colors-extended: append($colors, yellow)
    gap: nth($spacing, 2)

Map Data Type

  • Key value pairs, created with parentheses and colon separators
  • Ideal for theme tokens, component settings, and structured configs
  • Keys can be strings, identifiers, or numbers, choose clear keys
  • Combine maps for inheritance, and use default merging for overrides

Map Data Type Example

SCSS Code
Sass Code
CSS Code
$theme: (
    primary: #1e90ff,
    secondary: #ff6b6b,
    gap: 16px
);

$primary-color: map-get($theme, primary);
$theme-extended: map-merge($theme, (accent: #ffd166));

.button {
    background: $primary-color;
    padding: map-get($theme, gap);
}

$theme: (
    primary: #1e90ff,
    secondary: #ff6b6b,
    gap: 16px
)

$primary-color: map-get($theme, primary)
$theme-extended: map-merge($theme, (accent: #ffd166))

.button
    background: $primary-color
    padding: map-get($theme, gap)