Turn name:value pairs into SCSS — plain $variables, or a Sass map with a safe token() getter that errors on unknown names — with !default for library authors.
Show calculation steps
Processed privately in your browser — nothing you paste is uploaded, logged or stored.
SCSS tokens with compile-time safety
The same name:value input as the CSS sibling, emitted for Sass: plain $variables, or — the sturdier pattern — a $tokens map with a token() getter that @errors on unknown names, so a typo fails the BUILD instead of silently compiling to nothing. The !default flag option covers library authors whose consumers must be able to override.
Worked example (map form)
$tokens: (
"brand-primary": #6366f1,
"spacing-md": 16px,
);
@function token($name) {
@if not map-has-key($tokens, $name) {
@error "Unknown token: #{$name}";
}
@return map-get($tokens, $name);
}
.button { background: token("brand-primary"); }Why the map pattern wins in Sass code
- Maps iterate: @each over $tokens generates utility classes or CSS-variable bridges mechanically. Loose globals cannot.
- The getter centralizes access — rename a token and the compiler finds every stale reference.
The honest scope note
- SCSS variables are COMPILE-TIME: no runtime theming, no JS access, no media-query responsiveness. New projects wanting those need CSS custom properties — same input, one click away. SCSS still earns its place in Sass math, mixins and build-time configuration.
How to use the SCSS Variables Generator
- List tokens one per line as name: value.
- Choose plain $variables, a Sass map with a token() getter, or both.
- Copy into your _variables.scss partial.
Frequently asked questions
Why a Sass map instead of loose variables?
Maps are iterable (@each generates utility classes from them) and the included token() getter @errors on unknown names at compile time — typos fail the build instead of silently compiling to nothing.
What does !default do?
It makes your value a fallback: if the consumer defined the variable before importing your file, theirs wins. It is how every SCSS library exposes configuration — essential for shared code, unnecessary for app-internal tokens.
Should new projects use SCSS variables at all?
For runtime theming, no — CSS custom properties do things SCSS cannot (the sibling tool emits them from the same input). SCSS variables still earn their keep for values used in Sass math and mixins at build time.
