SCSS Variable Generator

The SCSS variable generator writes a palette out as Sass variables in the $name form, one declaration per color, ready to paste into a compiled stylesheet.

What is SCSS Variable Generator?

• The SCSS variable generator works from a list of name-and-colour rows and produces one Sass variable per row.
• It starts with two rows, primary and danger, and Add appends another, seeded with a random colour; each row pairs a text field with a colour field and a delete button.
• The output panel headed SCSS updates as you type, with a copy button for the whole block.

The syntax is the reason a dedicated page exists. Sass declares variables with a dollar sign, so a name typed as primary comes out as a dollar-prefixed declaration followed by the hex value. It compiles to the same result as the CSS custom properties a browser understands, with the important difference that Sass variables are resolved at build time and then cease to exist, whereas custom properties remain available at runtime. Choosing between them is a real decision: Sass variables are simpler and work everywhere the preprocessor runs, while custom properties can be changed by JavaScript or by a media query without a rebuild.

One property of Sass naming is worth knowing before you type, and it is the kind of thing that causes confusing bugs. Sass treats hyphens and underscores as equivalent in identifiers, so a variable declared as a hyphenated name and referenced with an underscore is the same variable. That is usually convenient — it means the choice of separator does not matter — but it also means two names that look different in a source file can silently be one variable, which is worth remembering when a value appears to change on its own.

The output is minimal by design: one declaration per row, no imports, no maps, no comments and no nesting. That makes it easy to splice into an existing variables partial, and it means the block is not a standalone Sass file. Values are written as hex, which also means they can be used with Sass's own colour functions — lightened, darkened, mixed, adjusted — so derived shades can be computed at build time from a single declared value rather than listed individually here.

In practice the shortest workflow is to name the tokens the way the project already refers to them, set the values, and copy. If the palette lives in a design system with published names, use those names rather than inventing new ones; the whole value of a variable is that the name at the call site is stable. Migrating from another preprocessor is a matter of keeping the names and changing the sigil, which is a mechanical change this generator removes the risk from.

• Limits: it exports colour variables only, with no mixins, functions, maps or control directives, and there is no validation — a blank name produces a declaration with no variable while a duplicate name quietly produces two declarations of the same variable.
• The values are always hex, with no rgb, hsl or channel-based output.
• Within those bounds, this is the quickest way to generate scss variables from colors, and for anyone assembling a set of sass color variables as a scss color palette code block it is a list of names and one copy — with the identical row interface driving the LESS and CSS-in-JS outputs, so the same naming decisions carry across if the build tooling changes.

How to use SCSS Variable Generator

1. Replace the default names with the tokens your stylesheet uses.
2. Set each value with the field beside its name, or add rows with Add.
3. Copy the block from the SCSS panel into your variables partial.
4. Use Sass colour functions such as lighten or mix on the values where derived shades are needed.

When to use SCSS Variable Generator vs related tools

Use this when a palette has to reach a stylesheet compiled with Sass. Use the CSS variables generator when the tokens should stay available at runtime, or the LESS generator for that preprocessor's syntax. When the values should travel as data rather than as build-time variables, the design token generator writes them as a token document, and a palette that already exists elsewhere can come in through the palette importer instead of being retyped row by row.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about SCSS Variable Generator