StylusをCSSに変換
StylusコードをCSSに変換
Stylus入力
変換済みCSS
StylusをCSSの例
Stylusの変数とネストがプレーンCSSにコンパイルされます。例：
変数とネストされたセレクター
Stylus入力：
コンパイル済みCSS：
上のサンプルでさらにサンプルデータを読み込めます。
StylusをCSSとは？
Stylusはオプションの括弧、変数、ミックスイン、ネストを持つCSSプリプロセッサです。SassやLessと同様、ブラウザ用の標準CSSにコンパイルされます。このツールはブラウザ内でStylusをCSSに変換します—ビルドステップは不要です。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の全機能に対応していますか？
このツールは変数、ネスト、親セレクター&に対応しています。ミックスイン、関数、@importなどの高度な機能には公式コンパイラが必要な場合があります。
StylusとSCSSとLessの違いは？
いずれもCSSプリプロセッサです。Stylusは最小構文（括弧/セミコロンオプション）を持ちます。SCSSはCSS互換です。LessはSCSSに似ています。スタックに合わせて選択してください。
darken()、lighten()は？
darken()などのStylus組み込み関数はこの基本的なコンバーターでは評価されません。完全なサポートにはビルドで公式Stylusコンパイラを使用してください。