Sassy, but GUI
Sassy, but GUI is a VS Code extension that brings Sassy directly into your editor as an interactive panel.
Open a .sassy.yaml file, click the colour-mode icon in the editor title bar (or run Show Sassy Panel from the command palette), and a live panel appears beside your editor.
Features
Section titled “Features”Diagnostics
Section titled “Diagnostics”Linting results organised by category: variables, workbench colours, token colours, and semantic token colours. Each issue is severity-tagged and expandable. Click links to jump directly to the source location in your theme file.
Workbench colour diagnostics are validated against the official VS Code theme schema via @gesslar/vscode-theme-schema, catching unknown properties, deprecated keys, and invalid values.
Resolve
Section titled “Resolve”Pick any colour, token colour, or semantic token colour from your compiled theme output and trace its resolution chain step-by-step through variable references, palette lookups, seances, and colour expressions. Each step shows its type, value, a colour swatch, and a link to jump to its definition in source.
View the fully composed YAML before evaluation. See how your theme file merges with all its dependencies — imports, palette inheritance, variable layering — and verify that everything resolves the way you expect.
Palette
Section titled “Palette”A visual swatch grid of every colour in your theme’s palette, showing colour name, raw expression, and resolved hex value.
Auto-Build
Section titled “Auto-Build”Toggle automatic theme compilation on every edit. A visual “dirty” indicator highlights when the on-disk JSON is stale. Manual build button available for one-off compiles.
File Watching
Section titled “File Watching”The extension watches your theme file and all of its dependencies. Edit an imported palette or shared variables file and the panel rebuilds automatically.
Commands
Section titled “Commands”| Command | Description |
|---|---|
| Show Sassy Panel | Open the Sassy panel for the current theme file |
| Build Theme | Write the compiled theme JSON to disk |
| Enable Auto-Build | Automatically write on every rebuild |
| Disable Auto-Build | Stop automatic writes |
These commands appear in the editor title bar and explorer context menu when a .sassy.yaml file is selected.
How it relates to the CLI
Section titled “How it relates to the CLI”Sassy, but GUI doesn’t replace the CLI — it complements it:
- Sassy CLI — batch processing, CI/CD, command-line workflows
- Sassy, but GUI — interactive development, real-time feedback, visual diagnostics
Both use the same underlying theme compilation engine (@gesslar/sassy), so a theme authored in the GUI behaves identically when compiled via the CLI.
Get the extension
Section titled “Get the extension”Install Sassy, but GUI from