Sass list.nth() Function

What You’ll Learn

list.nth() belongs to the built-in sass:list module. It returns the value at a given index. This page covers 1-based indexes, negative indexes from the end, out-of-range errors, pairing with list.length / list.index, Dart Sass support, and five compiled examples.

What Is list.nth()?

Once you know where something sits in a list (or you already know the slot number), list.nth pulls that value out at compile time—perfect for border parts, spacing scales, and font stacks.

• list.nth(10px 12px 16px, 2) → 12px
• list.nth([line1, line2, line3], -1) → line3
• list.nth(10px 12px 16px, 1) → 10px (first item)

📝 Syntax

Load the list module, then call the function:

@use "sass:list";

list.nth($list, $n)

Parameters

Return value

📦 Loading sass:list

// Recommended — namespaced
@use "sass:list";
$mid: list.nth(10px 12px 16px, 2);

// Optional — bring members into scope
@use "sass:list" as *;
$mid: nth(10px 12px 16px, 2);

// Optional — custom namespace
@use "sass:list" as l;
$mid: l.nth(10px 12px 16px, 2);

🔍 Negative Indexes

Counting from the end is handy when you want the last font fallback or the largest spacing token without hard-coding list.length.

@use "sass:list";

$gaps: 0.25rem 0.5rem 1rem 1.5rem 2rem;

list.nth($gaps, -1); // 2rem (last)
list.nth($gaps, -2); // 1.5rem (second-to-last)

📋 list.nth vs list.index

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS only contains the finished values you choose to emit.

Examples Gallery

Each example uses @use "sass:list". Open View Compiled CSS for verified Dart Sass output (official samples where noted).

@use "sass:list";

@debug list.nth(10px 12px 16px, 2);            // 12px
@debug list.nth([line1, line2, line3], -1);    // line3

.demo {
  --mid: #{list.nth(10px 12px 16px, 2)};
  --last: #{list.nth([line1, line2, line3], -1)};
}

.demo {
  --mid: 12px;
  --last: line3;
}

@use "sass:list";

$border: 1px solid #336699;

.box {
  border-width: list.nth($border, 1);
  border-style: list.nth($border, 2);
  border-color: list.nth($border, 3);
}

.box {
  border-width: 1px;
  border-style: solid;
  border-color: #336699;
}

@use "sass:list";

$gaps: 0.25rem 0.5rem 1rem 1.5rem 2rem;

.scale {
  --first: #{list.nth($gaps, 1)};
  --last: #{list.nth($gaps, -1)};
  --second-last: #{list.nth($gaps, -2)};
}

.scale {
  --first: 0.25rem;
  --last: 2rem;
  --second-last: 1.5rem;
}

@use "sass:list";

$fonts: Helvetica, Arial, sans-serif;

.card {
  --primary: #{list.nth($fonts, 1)};
  --fallback: #{list.nth($fonts, -1)};
  font-family: $fonts;
}

.card {
  --primary: Helvetica;
  --fallback: sans-serif;
  font-family: Helvetica, Arial, sans-serif;
}

@use "sass:list";

$gaps: 0.25rem 0.5rem 1rem 1.5rem 2rem;
$i: list.index($gaps, 1rem);

.hit {
  margin-top: if($i != null, list.nth($gaps, $i), 0);
}

.hit {
  margin-top: 1rem;
}

🚀 Real-World Use Cases

• Shorthand splitting — border, margin, or background token lists.
• Design scales — pick first/last spacing or size tokens.
• Font stacks — expose primary family vs final fallback.
• Utility generators — @for with list.nth($list, $i).
• Safe lookups — combine list.index + null guard + list.nth.

⚠️ Common Pitfalls

• 0-based thinking — the first item is 1, not 0.
• Out-of-range indexes — Sass errors; check list.length first.
• Null from index — never pass null straight into list.nth.
• Forgetting @use — list.nth needs sass:list.
• Confusing with set-nth — nth reads; set-nth returns a modified copy.

💡 Best Practices