HTML to SCSS

HTML / テンプレートから SpiraCSS 設計原則に沿った SCSS ファイルを自動生成する VS Code 拡張です。
内部で HTML CLI パッケージを使用しています。

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

インストール

VS Code >= 1.99.0 が必要です。

VS Code Marketplace または Open VSX から SpiraCSS HTML to SCSS を検索してインストールします。

→ VS Code Marketplace / Open VSX からインストール

使い方

コマンド

コマンド	キーバインド	説明
Generate SpiraCSS SCSS from Root	`Cmd+Ctrl+A`	ルート要素から SCSS ファイル群を生成
Generate SpiraCSS SCSS from Selection	`Cmd+Ctrl+S`	選択要素から SCSS ファイル群を生成
Insert SpiraCSS placeholders	`Cmd+Ctrl+D`	HTML にプレースホルダクラスを付与

ルートモード

ルート Block 要素を含む範囲を選択
Cmd+Ctrl+A または右クリックメニューから実行
編集中ファイルと同じフォルダにルート SCSS、childScssDir/（既定: scss/）に子 SCSS が生成される

ルート要素には class 属性が必要です。ない場合はエラーになります。

選択モード

個別に SCSS 化したい Block 要素を選択
Cmd+Ctrl+S または右クリックメニューから実行
childScssDir/（既定: scss/）に各 Block の SCSS が生成される

選択範囲内に複数の Block がある場合はそれぞれ生成されます。トップレベルに class を持つ要素が 1 つも無い場合はエラーになります。

プレースホルダ付与

SCSS を生成せず、HTML に SpiraCSS 用の目印クラスだけを付与します。クラス名が未定の段階で構造を先に整えたい場合に便利です。

ルートにしたい要素を含む範囲を選択
Cmd+Ctrl+D または右クリックメニューから実行
すべての子孫要素を再帰的に走査し、Block > Element 構造に整形

プレースホルダ名（block-box / element）は blockCase / elementCase 設定に応じて変わります。

設定

プロジェクトルートの spiracss.config.js で動作をカスタマイズできます。
package.json に "type": "module" がある場合は export default を使用してください。

制限事項

プレースホルダ付与コマンドはテンプレート構文（EJS、Nunjucks、Astro frontmatter 等）を含む HTML には適用されません
プレースホルダ付与は静的な HTML 断片のみ対応

変換仕様、対応テンプレート、Block/Element 判定、動的クラスの制限などの詳細は HTML CLI ドキュメントを参照してください。

使用例

入力 HTML:

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

出力構造:

your-component/
├─ hero-section.scss      ← ルート Block
├─ scss/
│   ├─ feature-card.scss  ← 子 Block
│   └─ index.scss         ← @use 自動マージ
└─ your-template.html

前へ
HTML CLI 次へ
Comment Links