あなたがフロントエンドの開発者である場合、あなたはほとんど知られていないSASSの遠い親relativeであるスタイラスのことを聞いたことがあるかもしれません。 SASSのように、スタイラスはnode.jsで書かれたCSSプリプロセッサでもあります。 GitHubコードベースによると、それはそれ自体を呼び出します：
[…] CSSを生成するための効率的で動的で表現力のある方法を提供する革新的な新しい言語。
まあ、「革命的」は少し誇張されるかもしれません。しかし、他のすべては真実です。
少し似ています。しかし、スタイラスはまったく新しいものではありません。 2011年初頭から存在していますが、かなり控えめなコミュニティがあると思います。ちなみに、最新のMozilla開発者ネットワークの再設計がスタイラスで行われたことをご存知ですか？プロジェクトに関与していたデイビッド・ウォルシュも、スタイラスを始める方法についても書きました。
では、SASSと比較したスタイラスの利点は何ですか？まあ、それはnode.jsで構築されていますが、私の意見ではそれは利点です。ノードサスLibsassラッパーのためにノードワークフローでSASSを使用してもまったく問題ありませんが、これはLibsassが完全にノードで書かれているという意味ではありません。
さらに、スタイラスには非常にゆるい構文があります。これは、プロジェクト、チーム、および厳格なコーディング規範に固執する傾向に応じて、良いことも悪いこともあります。スタイルシートにあまりロジックを含めていない限り、コードを送信する前にコードチェックを実行する限り、ゆるい構文は問題ないはずです。全体として、スタイラスとSASSはほぼ同じ機能をサポートしていますが、スタイラス機能の完全なリストを確認できますが、画期的なものは何も期待していません（ただし、新しい機能があります）。スタイラスは複数の構文もサポートしていますが、境界はSASSよりもはるかにぼやけています。ほとんどのようにスタイリングすることができます（インデント、CSSスタイル）。
それで、あなたはどう思いますか？試してみませんか？
初心者
前述のように、スタイラスはnode.jsで書かれているため、他のNPMパッケージと同様にインストールできます。<code>$ npm install stylus -g</code>
そこから、JavaScript APIを使用してノードワークフローに挿入するか、コマンドライン実行可能ファイルを使用してStyleSheetをコンパイルできます。簡単にするために、Stylusコマンドラインツールを使用しますが、ノードスクリプト、Gulp、またはGruntから好きなように実行できます。
<code>stylus ./stylesheets/ --out ./public/css</code>
前のコマンドは、スタイルシートフォルダーからすべてのStylus Stylesheets（.styl）をコンパイルし、パブリック/CSSフォルダーで生成するようにスタイラスに指示します。もちろん、ディレクトリの変更を監視することもできます。
<code>stylus --watch ./stylesheets/ --out ./public/css</code>
基本的な構文
最初は少し邪魔ですが、特に構文が強調表示されている場合は、慣れることができます。ご想像のとおり、前のコードは次のようにコンパイルします。
<code>.foo .bar color tomato background deepskyblue</code>
変数
<code>.foo, .bar {
color: tomato;
background: deepskyblue;
}</code>スタイラスは、SASSまたは他のプリプロセッサが行うことを行います：プロパティバリュールックアップ。幅の半分に等しい負の左マージンを適用するとしますが、幅を変数に保存する必要があります。
<code>// 定义 `text-font-stack` 变量 text-font-stack = 'Helvetica', 'Arial', sans-serif; // 将其用作 `font` 属性的一部分 body font 125% / 1.5 text-font-stack</code>
この場合、.fooがz-index属性に値を割り当てていない限り、z-indexは1に設定されます。 Mixinと一緒に使用すると、本当に何かがあります。
<code>.foo width 400px position absolute left 50% margin-left (@width / 2)</code>
これについて言えば、ミックスインを定義しましょう。これは、おそらくSASSの最も人気のある機能の1つであるためです。スタイラスのミックスは、特定のキーワードを必要としません。
<code>.foo // ... 其他样式 z-index: 1 unless @z-index</code>
必要に応じてブラケットを削除することもできます。その場合、完全に標準の（ただし）CSSプロパティを使用しているように見えます。このメカニズムは、それらの包含が目に見えないため、
<code>size(width, height = width) width width height height</code>
<code>$ npm install stylus -g</code>
指定された値が省略記号の場合、シングルラインの省略記号のオーバーフローを得るために必要なよく知られている宣言トリプルを印刷します。それ以外の場合は、指定された値が印刷されます。以下はそれをどのように使用するかです：
<code>stylus ./stylesheets/ --out ./public/css</code>
生成：
<code>stylus --watch ./stylesheets/ --out ./public/css</code>
これは非常にクールなトリックであることを認めなければなりません。混乱を招く可能性がありますが（危険になる可能性があります）、追加の値で標準のCSSプロパティを拡張できることは、実際には興味深い概念です。
@Content WayでMixinにコンテンツを渡す場合は、{block}変数で実行できます。含める際、ミックスインネームの前に追加のコンテンツを渡すだけで追加する必要があります。
<code>.foo .bar color tomato background deepskyblue</code>
Stylus Mixinの最後の非常に興味深い機能：それらには、含まれている場合（もしあれば）ミックスインに渡されたすべてのパラメーターを含むすべてのパラメーターを含む引数が常にあります。たとえば、[..]を使用して、JavaScriptのようにこの変数を操作して、特定のインデックスで値を取得できます。
<code>.foo, .bar {
color: tomato;
background: deepskyblue;
}</code>最終的な考え
ご覧のとおり、スタイラスは非常にゆるいです。既存のすべてのCSSの執筆ヘルパーのうち、スタイラスは間違いなくCSSを真のプログラミング言語に導く最も近いツールです。
スタイラスには独自のフレームワークもあります。SASSがコンパスを所有しているように、それはペン先と呼ばれています。 NIBは、スタイラスに追加のヘルパーとミックスインクロスブラウザーのサポートを提供するツールボックスです。
一部の人々はそれを好むかもしれません、一部の人々はそうではないかもしれません。私のアドバイスは、文法を厳密に順守することです。このようなゆるい構文に対処するのは必ずしも簡単ではありません。とにかく、SASSの優れた競合他社の一部を見るのは素晴らしいことです。
スタイラス（FAQ）についてのFAQ
スタイラスと他のCSS前処理者の主な違いは何ですか？スタイラスは、node.jsとnpm（ノードパッケージマネージャー）を使用してインストールできます。まず、コンピューターにnode.jsとnpmをインストールする必要があります。インストールが完了したら、端末またはコマンドプロンプトでsylus -gをインストールするコマンドNPMを実行して、Stylusをグローバルにインストールできます。これにより、コンピューター上の任意のディレクトリからスタイラスを使用できます。
Stylusコードを作成した後、ターミナルまたはコマンドプロンプトのStylusコマンドを使用してCSSにコンパイルできます。たとえば、Stylusファイルがstyle.stylという名前の場合、コマンドStylus -c style.stylを実行する必要があります。これにより、同じディレクトリにstyle.cssという名前のCSSファイルが作成されます。
はい、スタイラスは変数の使用をサポートしています。値を名前に割り当てることにより、変数を定義できます。たとえば、font-size = 14px。次のような名前を参照して、コードの他の場所でこの変数を使用できます。
はい、スタイラスは関数とミックスインをサポートします。スタイラスの関数は、DEFキーワードを使用して定義され、計算を実行したり、値を動作させることができます。一方、Mixinは、他のルールセットに含めることができるコードの再利用可能なブロックです。
スタイラスは、if、else、elseキーワードを使用して条件付きステートメントをサポートしています。これらは、特定の条件に基づいてさまざまなスタイルを適用するために使用できます。たとえば、条件付きステートメントを使用して、画面サイズに応じてさまざまなフォントサイズを適用できます。
はい、Stylusでは、@importディレクティブを使用して他のStylusファイルをインポートできます。これは、コードを個別のファイルに整理し、複数のスタイルシートでコードを再利用するのに役立ちます。
はい、スタイラスはループをサポートします。これらを使用して、重複したCSSルールを生成したり、リストとアレイを繰り返したりできます。
はい、スタイラスはnode.jsで使用できます。実際、Stylusはnode.js上に構築されており、NPM（ノードパッケージマネージャー）を使用してインストールできます。また、node.jsの人気のあるWebアプリケーションフレームワークであるExpressでStylusを使用することもできます。
Stylusは、デバッグ情報の出力に使用できる-debugフラグを提供します。これは、エラーの追跡やコードの処理方法を理解するのに役立ちます。さらに、スタイラスのINSPECT（）関数を使用して、変数または式の値を出力できます。
以上がスタイラスを知るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
