Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>SpiraCSS HTML to SCSSNew to Visual Studio Code? Get it now.
SpiraCSS HTML to SCSS

SpiraCSS HTML to SCSS

SpiraCSS

|
17 installs
| (0) | Free
VS Code extension to generate SpiraCSS SCSS from HTML and insert placeholder classes.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

SpiraCSS HTML to SCSS

VS Code extension that generates SpiraCSS SCSS files from HTML structure and can insert placeholder classes.

Demo

Demo

About SpiraCSS

SpiraCSS is a CSS architecture designed to stay intact. HTML structure decides where styles belong, and Stylelint enforces it — no matter who writes, human or AI.

This extension is designed to be used with the SpiraCSS Design Principles.

→ See how it works

Requirements

  • VS Code >= 1.99.0

Features

  • Generate SCSS from a selected HTML fragment or root block
  • Insert placeholder classes (block-box / element)
  • Reads naming and generator options from spiracss.config.js
  • Generation logic is powered by @spiracss/html-cli

Commands

Command Keybinding
Generate SpiraCSS SCSS from Root Cmd+Ctrl+A
Generate SpiraCSS SCSS from Selection Cmd+Ctrl+S
Insert SpiraCSS placeholders (block-box / element) Cmd+Ctrl+D

Quick Start

  1. Create spiracss.config.js in your project root.
  2. Select an HTML fragment.
  3. Run a SpiraCSS command from the Command Palette or use the keybinding.

Docs

  • HTML to SCSS
  • Configuration

Related Tools

  • SpiraCSS Stylelint Plugin (npm)
  • SpiraCSS HTML CLI (npm)
  • SpiraCSS Comment Links (VS Code Marketplace / Open VSX)
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft