StylusをCSSに変換 — 無料オンライン
StylusコードをCSSに即座に変換、無料、ブラウザのみ。
Stylus入力
変換済みCSS
StylusをCSSの例
Stylusの変数とネストがプレーンCSSにコンパイルされます。例：
変数とネストされたセレクター
Stylus入力：
コンパイル済みCSS：
上のサンプルでさらにサンプルデータを読み込めます。
StylusをCSSとは？
変数、ネストされたセレクター、そのクリーンな最小構文を持つ.stylファイルがある — でもブラウザはプレーンCSSしか理解しない。このツールはそのギャップを埋めます。Stylusは柔軟な構文で知られるCSSプリプロセッサで、中括弧、セミコロン、コロンはすべてオプションです。Sass/SCSSやLessと同様、ブラウザが使用する前にコンパイルが必要です。フルプロジェクトでは公式Stylus npmパッケージを使用しますが、クイックチェックやスニペット共有にはそれは過剰です。このツールはJavaScriptを使用してブラウザ内で完全に変換を実行します。出力はW3C CSS仕様に従います。
Stylusを貼り付けるか.stylファイルをアップロードしてください。ツールは変数、ネスト、親セレクター&を処理します。完全にブラウザ内で動作します。SCSSやLessにはSCSSをCSSにまたはLessをCSSにを。出力のフォーマットにはCSSフォーマッターを使用してください。
このツールの使い方
Stylusを貼り付けまたはアップロード
Stylusコードを左のエディターに貼り付けるか、アップロードをクリックして.stylファイルを読み込みます。サンプルで変数とネスト付きのサンプルStylusを読み込めます。
CSS出力を確認
右のパネルにコンパイルされたCSSが表示されます。複雑なStylus（ミックスイン、関数、インポート）には公式Stylusコンパイラが必要な場合があります。検証にはCSSバリデーターを使用してください。
コピーまたはダウンロード
コピーまたはダウンロードでCSSを保存します。ミニファイにはCSSミニファイアーを。CSSをSCSSやLessに変換するにはCSSをSCSSにまたはCSSをLessにを使用してください。
Stylus変換が役立つ場面
StylusはVite、Webpack、Gulpで構築されたプロジェクトで使用されます。完全なビルドなしでスニペットをコンパイルする必要がある場合、またはStylusが生成する内容を確認する場合、このツールが役立ちます。ビルドパイプラインは通常公式Stylusパッケージを使用します。
他のプリプロセッサにはSCSSをCSSにまたはLessをCSSにを。CSSファイルの結合にはCSSコンバイナーを。HTMLからCSSを抽出するにはCSSエクストラクターを使用してください。
よくある質問
インストールなしでStylusをCSSに変換するには？
StylusコードをこのツールにペーストするだけでCSSが即座に表示されます。すべてJavaScriptでブラウザ内で実行 — npm、Node.js、ビルドステップ不要。コードはデバイスを離れません。
このツールはStylusの変数とネストに対応していますか？
はい。変数（例：$primary = #007bff）、ネストされたセレクター、&親セレクターすべてに対応しています。ミックスイン、関数、@importなどの高度な機能には公式Stylusコンパイラが必要です。
Stylus、SCSS、Lessの違いは何ですか？
いずれもCSSプリプロセッサです。Stylusは最も柔軟な構文を持ち、中括弧、セミコロン、コロンはすべてオプションです。SCSSはCSSのスーパーセットです。LessはJavaScriptベースでSCSSに似ています。
darken()などの関数が動作しないのはなぜですか？
darken()やlighten()などのStylus組み込み関数には完全なStylusランタイムが必要です。このツールは静的変換のみ対応しています。完全な関数サポートにはStylusをnpmでインストRしてローカルでコンパイルしてください。
Stylusコードはサーバーに送信されますか？
いいえ。すべての変換はブラウザ内で完全に実行されます。Stylusコードはデバイスを離れません — バックエンドなし、ログなし。