Sass list.slash()

Definition and Usage

list.slash($elements...) returns a slash-separated list that contains $elements. Load it with @use "sass:list" on Dart Sass 1.23+. There is no separate global slash().

Syntax

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

list.slash(1px, 50px, 100px); // 1px / 50px / 100px
list.slash(16px, 1.5);        // 16px / 1.5
list.slash(16, 9);            // 16 / 9

// Real division (not a slash list)
math.div(16, 9);              // 1.777…

Pattern: build with list.slash → confirm with list.separator (slash) → emit into CSS.

Slash vs Division

Do not mix the two jobs of /:

Related Functions

Load with @use "sass:list". Previous: list.set-nth(). Next: list.zip(). Separator: list.separator(). Division: math.div(). Also: list.join() with $separator: slash.

SCSS Examples

Examples target Dart Sass 1.23+ with @use "sass:list". Open View Compiled CSS for verified output (matches official Sass docs samples).

@use "sass:list";

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

.sizes {
  --stack: #{list.slash(1px, 50px, 100px)};
  --sep: #{list.separator(list.slash(1px, 50px, 100px))};
  --len: #{list.length(list.slash(1px, 50px, 100px))};
}

.sizes {
  --stack: 1px / 50px / 100px;
  --sep: slash;
  --len: 3;
}

@use "sass:list";

$pair: list.slash(1.2rem, 1.6);

.font {
  font: list.slash(16px, 1.5) sans-serif;
}

.type {
  font: $pair Helvetica, sans-serif;
}

.font {
  font: 16px / 1.5 sans-serif;
}

.type {
  font: 1.2rem / 1.6 Helvetica, sans-serif;
}

@use "sass:list";

.ratio {
  aspect-ratio: list.slash(16, 9);
}

.ratio {
  aspect-ratio: 16 / 9;
}

@use "sass:list";

.radius {
  border-radius: list.slash(10px, 20px);
}

.radius {
  border-radius: 10px / 20px;
}

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

.div-vs-slash {
  --slash: #{list.slash(16, 9)};
  --div: #{math.div(16, 9)};
}

.div-vs-slash {
  --slash: 16 / 9;
  --div: 1.7777777778;
}

Sass Support

Prefer the module form with a current Dart Sass release. There is no global slash().

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. @use "sass:list"
2. Use list.slash for CSS slash values
3. Use math.div for real division
4. Confirm with list.separator(...) == slash
5. Keep call sites easy to migrate when slash literals arrive