SugarSS

SugarSS とは PostCSS 用のインデントベース CSS シンタックスです。Parcel は @parcel/transformer-sugarss プラグインを使用して自動的に SugarSS をサポートしています。.sss ファイルが検出されると、自動的にプロジェクトにインストールされます。

コンパイルされた SugarSS ファイルも CSS と同じように処理されます。つまり、ブラウザーターゲット向けにコンパイルされ、PostCSS プラグインも適用されます。.module.sss 拡張子でファイルを命名することで CSS モジュール も使用できます。

使用例

HTML ファイルで SugarSS ファイルを参照する

<link rel="stylesheet" href="style.sss" />

JavaScript または TypeScript で SugarSS ファイルを CSS モジュールとしてインポートする

import * as classes from './style.module.sss';

document.body.className = classes.body;

Parcel CLI を使用して直接 SugarSS をコンパイルする

parcel build style.sss