Stylus→LESS変換

StylusとLESSで異なる書き方

Stylusはインデントでルールの親子関係を表せるスタイル言語です。たとえばセレクターの下に属性を字下げして書きます。LESSはCSSに近い波括弧とセミコロンの書式を使い、変数やMixinなどの機能を加えられます。どちらも最終的にはCSSとして使われますが、同じCSS機能を持つわけではありません。

このページの変換は、Stylusのよくあるインデント構造を波括弧付きのコードに整える作業や、LESSをCSSへコンパイルした結果の確認に使えます。言語間の機能を自動で対応付ける完全な移行処理ではありません。

Stylusから出力されるコードの見方

StylusからLESS側へ進めると、インデントからブロックの波括弧を組み立て、color #fff のような属性行を color: #fff; の形に整えます。親セレクターを表す &:hover などはネスト内に残るため、出力先のコンパイラーで展開結果を確認してください。

Stylusの primary = #1890ff のような代入行は --primary: #1890ff; の形になります。元の primary という参照箇所は連動して書き換わりません。CSSカスタムプロパティとして使うのか、LESS変数の @primary に移すのかを決め、宣言と参照をそろえる必要があります。

LESSからStylus側へ切り替えたとき

逆方向の出力は、LESSを解析して変数やネストなどを評価したあとの通常CSSです。インデント式のStylusへ書き直したコードではありません。CSSはStylusでも扱える書式なので結果を確認できますが、Stylus独自の省略表記や変数を復元するものではありません。

Stylusのインデントによる構造についてはStylus公式のセレクター資料、代入と参照については変数の説明を参照できます。LESSの変数やMixinなどの機能はLess.js公式機能資料で確認できます。プリプロセッサーの一般的な役割はMDNの用語解説にまとめられています（2026-10-01確認）。

小さな範囲で移行の下書きを作る

1. 変換方向を確認

   初期状態はStylusからLESS側です。方向ボタンで逆向きにできますが、LESSから戻すと結果はコンパイル済みCSSになります。

2. 短いコードを入力する

   最初はセレクター1つ、属性数個、必要なら浅いネストだけを貼り付けます。空行は入力できますが、空の入力では変換されません。

3. 結果を確認してコピーする

   変換を実行し、宣言・括弧・セミコロンを確認します。変数、関数、Mixin、条件分岐、読み込み指定などを含む場合は、対象プロジェクトのLESSまたはStylusコンパイラーで別途検証してください。

変換結果についてよくある質問

意味の等価性はプロジェクト側で検証

この変換は一般的な縮進ルールを整理する補助です。Stylusの関数、Mixin、条件、ループ、読み込み、複雑な式をLESSの同等機能へ自動対応付けるものではありません。行コメントは出力から失われる場合があるため、ライセンス表記や作業上の注意を含むコードでは原文も保管してください。

変換後は元ファイルと比較し、利用中のコンパイラーでCSSを生成して、セレクター・値・表示を確認してから採用してください。