Sass list.slash() Function

What You’ll Learn

list.slash() belongs to the built-in sass:list module. It builds a slash-separated list when you cannot type / as a list separator yet. This page covers why it exists, how it differs from math.div(), pairing with list.separator, Dart Sass support, and five compiled examples.

What Is list.slash()?

CSS uses slash separators in places like aspect-ratio: 16 / 9, font: 1.2em / 1.5, and some grid / color syntax. Sass historically treated / as division, so you cannot always write slash lists literally yet. list.slash creates that list structure for you.

• list.slash(1px, 50px, 100px) → 1px / 50px / 100px
• list.slash(16, 9) → 16 / 9
• list.separator(list.slash(16, 9)) → slash

📝 Syntax

Load the list module, then pass one or more values:

@use "sass:list";

list.slash($elements...)

Parameters

Return value

📦 Loading sass:list

// Recommended — namespaced
@use "sass:list";
$ratio: list.slash(16, 9);

// Optional — bring members into scope
@use "sass:list" as *;
$ratio: slash(16, 9);

// Optional — custom namespace
@use "sass:list" as l;
$ratio: l.slash(16, 9);

🔍 list.slash vs math.div

Both involve the / character in Sass history, but they answer different questions.

📋 Creating Slash Lists Other Ways

You can also force a slash separator with list.join() or list.append via $separator: slash.

@use "sass:list";

// Dedicated helper
$list: list.slash(10px, 20px);

// Same separator idea via join
$more: list.join($list, list.slash(30px, 40px), $separator: slash);
// → 10px / 20px / 30px / 40px

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS only contains the finished slash-separated values (for example in aspect-ratio).

Examples Gallery

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

@use "sass:list";
@use "sass:meta";

@debug list.slash(1px, 50px, 100px); // 1px / 50px / 100px

.tracks {
  --tracks: #{meta.inspect(list.slash(1px, 50px, 100px))};
  --sep: #{meta.inspect(list.separator(list.slash(1px, 50px, 100px)))};
}

.tracks {
  --tracks: 1px / 50px / 100px;
  --sep: slash;
}

@use "sass:list";
@use "sass:meta";

$ratio: list.slash(16, 9);

.hero {
  --sep: #{meta.inspect(list.separator($ratio))};
  aspect-ratio: $ratio;
}

.hero {
  --sep: slash;
  aspect-ratio: 16 / 9;
}

@use "sass:list";

$font: list.slash(1.2, 1.6);

.card {
  font: #{$font} system-ui;
}

.card {
  font: 1.2 / 1.6 system-ui;
}

@use "sass:list";
@use "sass:math";

$row: list.slash(span math.div(6, 2), 7);

.item {
  grid-row: $row;
}

.item {
  grid-row: span 3 / 7;
}

@use "sass:list";
@use "sass:meta";

$a: list.slash(10px, 20px);
$b: list.join($a, list.slash(30px, 40px), $separator: slash);

.joined {
  --a: #{meta.inspect($a)};
  --b: #{meta.inspect($b)};
  --len: #{list.length($b)};
}

.joined {
  --a: 10px / 20px;
  --b: 10px / 20px / 30px / 40px;
  --len: 4;
}

🚀 Real-World Use Cases

• Aspect ratios — 16 / 9, 4 / 3, and design tokens.
• Font shorthand — size / line-height pairs in font.
• Grid placement — slash-separated grid-row / grid-column values.
• Migration tooling — keep slash lists while moving division to math.div.
• Design systems — store slash tokens and inspect them with list.separator.

⚠️ Common Pitfalls

• Using slash for math — division belongs in math.div, not list.slash.
• Expecting a number — list.slash(16, 9) is a list, not 1.777.
• Assuming a global slash() — use the sass:list module API.
• Forgetting it is temporary — plan for literal slash lists as Sass evolves.
• Forgetting @use — list.slash needs sass:list.

💡 Best Practices