Skip to content
SpiraCSS v0.3.2-beta

HTML to SCSS

A VS Code extension that generates SCSS files from HTML or template fragments according to the SpiraCSS Design Principles.
This extension uses the HTML CLI package internally.

<section class="hero-section">
  <h1 class="title">Welcome</h1>
</section>

Install

VS Code >= 1.99.0 is required.

Install from the VS Code Marketplace or Open VSX by searching for SpiraCSS HTML to SCSS.

→ Install from VS Code Marketplace / Open VSX

Usage

Commands

CommandKeybindingDescription
Generate SpiraCSS SCSS from RootCmd+Ctrl+AGenerate SCSS files from the root element
Generate SpiraCSS SCSS from SelectionCmd+Ctrl+SGenerate SCSS files from the selection
Insert SpiraCSS placeholdersCmd+Ctrl+DInsert placeholder classes into HTML

Root mode

  1. Select a range that includes the root Block element
  2. Run Cmd+Ctrl+A or choose the command from the context menu
  3. Generates the root SCSS in the same folder as the current file, and child SCSS files under childScssDir/ (default: scss/)

The root element must have a class attribute. If it doesn’t, generation fails.

Selection mode

  1. Select the Block elements you want to convert to SCSS
  2. Run Cmd+Ctrl+S or choose the command from the context menu
  3. Generates SCSS for each Block under childScssDir/ (default: scss/)

If the selection contains multiple Blocks, each one is generated. If no top-level elements have a class attribute, an error is raised.

Insert placeholders

Adds placeholder classes to HTML without generating SCSS. Useful for aligning the structure before naming classes.

  1. Select a range that includes the element you want to treat as the root
  2. Run Cmd+Ctrl+D or choose the command from the context menu
  3. Recursively normalizes descendants into a Block > Element structure

Placeholder names (block-box / element) change based on blockCase / elementCase settings.

Configuration

Customize behavior in spiracss.config.js at the project root.
If package.json has "type": "module", use export default instead of module.exports.

Limitations

  • The Insert placeholders command does not apply to HTML with template syntax (EJS, Nunjucks, Astro frontmatter, etc.)
  • Only static HTML fragments are supported for placeholder insertion

For detailed conversion specs, template support, Block/Element detection rules, and dynamic class limitations, see the HTML CLI documentation.

Example

Input HTML:

<section class="hero-section">
  <h1 class="title">Welcome</h1>
  <div class="feature-card">
    <h2 class="heading">Feature</h2>
  </div>
</section>

Output structure:

your-component/
├─ hero-section.scss      -> root Block
├─ scss/
│   ├─ feature-card.scss  -> child Block
│   └─ index.scss         -> @use merged automatically
└─ your-template.html