あなたがフロントエンドの開発者である場合、あなたはほとんど知られていないSASSの遠い親relativeであるスタイラスのことを聞いたことがあるかもしれません。 SASSのように、スタイラスはnode.jsで書かれたCSSプリプロセッサでもあります。 GitHubコードベースによると、それはそれ自體を呼び出します：

[…] CSSを生成するための効率的で動的で表現(xiàn)力のある方法を提供する革新的な新しい言語。

まあ、「革命的」は少し誇張されるかもしれません。しかし、他のすべては真実です。

キーポイント

• Stylusは、node.jsで書かれたCSSプリプロセッサであり、SASSなどの同様のツールよりもゆるい構文を備えています。オプションの括弧、コロン、およびセミコロンを可能にし、インデントの構文と通常のCSSスタイルをサポートします。
• Stylusは、変數(shù)、関數(shù)、およびミキシンの使用をサポートして、CSSを真のプログラミング言語に近づけます。また、屬性値検索機能を備えており、屬性が定義されているかどうかに基づいて條件付きで屬性を出力できます。
• スタイラスは非常に柔軟ですが、スタイラスを使用するには、混亂を避けるために構文ルールを順守する必要があります。 node.jsおよびnpmを使用してインストールし、Stylusコマンドを使用してCSSにコンパイルできます。スタイラスには、獨自のフレームワークであるNIBもあり、ミックスインの追加ヘルパーとクロスブラウザーサポートを提供します。

何、別のもの？ ！

少し似ています。しかし、スタイラスはまったく新しいものではありません。 2011年初頭から存在していますが、かなり控えめなコミュニティがあると思います。ちなみに、最新のMozilla開発者ネットワークの再設計がスタイラスで行われたことをご存知ですか？プロジェクトに関與していたデイビッド?ウォルシュも、スタイラスを始める方法についても書きました。

では、SASSと比較したスタイラスの利點は何ですか？まあ、それはnode.jsで構築されていますが、私の意見ではそれは利點です。ノードサスLibsassラッパーのためにノードワークフローでSASSを使用してもまったく問題ありませんが、これはLibsassが完全にノードで書かれているという意味ではありません。

さらに、スタイラスには非常にゆるい構文があります。これは、プロジェクト、チーム、および厳格なコーディング規(guī)範に固執(zhí)する傾向に応じて、良いことも悪いこともあります。スタイルシートにあまりロジックを含めていない限り、コードを送信する前にコードチェックを実行する限り、ゆるい構文は問題ないはずです。

全體として、スタイラスとSASSはほぼ同じ機能をサポートしていますが、スタイラス機能の完全なリストを確認できますが、畫期的なものは何も期待していません（ただし、新しい機能があります）。スタイラスは複數(shù)の構文もサポートしていますが、境界は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フォルダーで生成するようにスタイラスに指示します。もちろん、ディレクトリの変更を監(jiān)視することもできます。

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

スタイラススタイルを書く

あなたがちょうど學び始めていて、新しい構文に圧倒されたくない場合は、.stylファイルに純粋なCSSを書くことができることを知ってください。 Stylusは標準のCSS構文をサポートしているため、CSSコードを使用してゆっくりと強化するだけで問題ありません。

基本的な構文

文法自體について、ほとんどすべてがオプションです。ブレース：なぜわざわざ？セミコロン：忘れて！コロン：捨ててください。ブラケット：お願いします。完全に有効なスタイラスコードは次のとおりです

最初は少し邪魔ですが、特に構文が強調表示されている場合は、慣れることができます。ご想像のとおり、前のコードは次のようにコンパイルします。

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

変數(shù)

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

CSSプリプロセッサの最も一般的な機能は、変數(shù)を定義する能力でなければなりません。スタイラスがそれを提供することも驚くことではありません。 SASSに反して、それらはコロン（:)の代わりに等記號（=）で宣言されています。さらに、主要なドル記號（$）はオプションであり、安全に省略できます。

スタイラスは、SASSまたは他のプリプロセッサが行うことを行います：プロパティバリュールックアップ。幅の半分に等しい負の左マージンを適用するとしますが、幅を変數(shù)に保存する必要があります。

<code>// 定義 `text-font-stack` 變量
text-font-stack = 'Helvetica', 'Arial', sans-serif;

// 將其用作 `font` 屬性的一部分
body
  font 125% / 1.5 text-font-stack</code>

@Widthを使用することにより、Stylusに、現(xiàn)在のブロックの幅屬性の値を取得し、変數(shù)として扱うように指示します。とても賢い！もう1つの興味深いユースケースは、屬性が定義されているかどうかに基づいて條件付き出力屬性です。

この場合、.fooがz-index屬性に値を割り當てていない限り、z-indexは1に設定されます。 Mixinと一緒に使用すると、本當に何かがあります。

<code>.foo
  width 400px
  position absolute
  left 50%
  margin-left (@width / 2)</code>

MIXIN

これについて言えば、ミックスインを定義しましょう。これは、おそらくSASSの最も人気のある機能の1つであるためです。スタイラスのミックスは、特定のキーワードを必要としません。

<code>.foo
  // ... 其他樣式
  z-index: 1 unless @z-index</code>

同様に、Mixinを含む同様に、@includeなどの特定の構文は必要ありません。

必要に応じてブラケットを削除することもできます。その場合、完全に標準の（ただし）CSSプロパティを使用しているように見えます。このメカニズムは、それらの包含が目に見えないため、

透明な混合物

と呼ばれます。

<code>size(width, height = width)
  width width
  height height</code>

これは一見不要なトリックのように見えるかもしれませんが、慎重に考えると、この機能により、著者はデフォルトのCSS構文を拡張できます。次のオーバーフロー混合物を考えてみましょう：

<code>$ npm install stylus -g</code>

指定された値が省略記號の場合、シングルラインの省略記號のオーバーフローを得るために必要なよく知られている宣言トリプルを印刷します。それ以外の場合は、指定された値が印刷されます。以下はそれをどのように使用するかです：

<code>stylus ./stylesheets/ --out ./public/css</code>

生成：

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

これは非常にクールなトリックであることを認めなければなりません?；靵yを招く可能性がありますが（危険になる可能性があります）、追加の値で標準のCSSプロパティを拡張できることは、実際には興味深い概念です。

@Content WayでMixinにコンテンツを渡す場合は、{block}変數(shù)で実行できます。含める際、ミックスインネームの前に追加のコンテンツを渡すだけで追加する必要があります。

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

このコードは、次のようにコンパイルされます

Stylus Mixinの最後の非常に興味深い機能：それらには、含まれている場合（もしあれば）ミックスインに渡されたすべてのパラメーターを含むすべてのパラメーターを含む引數(shù)が常にあります。たとえば、[..]を使用して、JavaScriptのようにこの変數(shù)を操作して、特定のインデックスで値を取得できます。

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

最終的な考え

スタイラスのすべての機能と構文のヒントを旅することはあまりにも冗長であり、少なくとも學習を開始するのに十分な紹介があると思います！

ご覧のとおり、スタイラスは非常にゆるいです。既存のすべてのCSSの執(zhí)筆ヘルパーのうち、スタイラスは間違いなくCSSを真のプログラミング言語に導く最も近いツールです。

スタイラスには獨自のフレームワークもあります。SASSがコンパスを所有しているように、それはペン先と呼ばれています。 NIBは、スタイラスに追加のヘルパーとミックスインクロスブラウザーのサポートを提供するツールボックスです。

一部の人々はそれを好むかもしれません、一部の人々はそうではないかもしれません。私のアドバイスは、文法を厳密に順守することです。このようなゆるい構文に対処するのは必ずしも簡単ではありません。とにかく、SASSの優(yōu)れた競合他社の一部を見るのは素晴らしいことです。

スタイラス（FAQ）

についてのFAQ

スタイラスと他のCSS前処理者の主な違いは何ですか？

スタイラスは、強力で柔軟な動的なスタイルシート言語です。 SASSなどの他のCSSプリプロセッサとは異なり、スタイラスはブラケット、コロン、セミコロンをオプションの使用を可能にし、より柔軟で厳格なものにします。また、インデントの構文と通常のCSSスタイルをサポートし、コードを書くときに開発者がより大きな自由を提供します。さらに、Stylusは透明なミクシンをサポートしています。つまり、特別な構文を使用せずにミックスインを呼び出すことができます。

スタイラスをインストールする方法は？

スタイラスは、node.jsとnpm（ノードパッケージマネージャー）を使用してインストールできます。まず、コンピューターにnode.jsとnpmをインストールする必要があります。インストールが完了したら、端末またはコマンドプロンプトでsylus -gをインストールするコマンドNPMを実行して、Stylusをグローバルにインストールできます。これにより、コンピューター上の任意のディレクトリからスタイラスを使用できます。

スタイラスをCSSにコンパイルする方法は？

Stylusコードを作成した後、ターミナルまたはコマンドプロンプトのStylusコマンドを使用してCSSにコンパイルできます。たとえば、Stylusファイルがstyle.stylという名前の場合、コマンドStylus -c style.stylを実行する必要があります。これにより、同じディレクトリにstyle.cssという名前のCSSファイルが作成されます。

スタイラスで変數(shù)を使用できますか？

はい、スタイラスは変數(shù)の使用をサポートしています。値を名前に割り當てることにより、変數(shù)を定義できます。たとえば、font-size = 14px。次のような名前を參照して、コードの他の場所でこの変數(shù)を使用できます。

スタイラスは機能とミックスインをサポートしますか？

はい、スタイラスは関數(shù)とミックスインをサポートします。スタイラスの関數(shù)は、DEFキーワードを使用して定義され、計算を実行したり、値を動作させることができます。一方、Mixinは、他のルールセットに含めることができるコードの再利用可能なブロックです。

スタイラスで條件付きステートメントを使用する方法は？

スタイラスは、if、else、elseキーワードを使用して條件付きステートメントをサポートしています。これらは、特定の條件に基づいてさまざまなスタイルを適用するために使用できます。たとえば、條件付きステートメントを使用して、畫面サイズに応じてさまざまなフォントサイズを適用できます。

他のスタイラスファイルをインポートできますか？

はい、Stylusでは、@importディレクティブを使用して他のStylusファイルをインポートできます。これは、コードを個別のファイルに整理し、複數(shù)のスタイルシートでコードを再利用するのに役立ちます。

スタイラスはループをサポートしていますか？

はい、スタイラスはループをサポートします。これらを使用して、重複したCSSルールを生成したり、リストとアレイを繰り返したりできます。

node.jsでスタイラスを使用できますか？

はい、スタイラスはnode.jsで使用できます。実際、Stylusはnode.js上に構築されており、NPM（ノードパッケージマネージャー）を使用してインストールできます。また、node.jsの人気のあるWebアプリケーションフレームワークであるExpressでStylusを使用することもできます。

スタイラスコードをデバッグする方法は？

Stylusは、デバッグ情報の出力に使用できる-debugフラグを提供します。これは、エラーの追跡やコードの処理方法を理解するのに役立ちます。さらに、スタイラスのINSPECT（）関數(shù)を使用して、変數(shù)または式の値を出力できます。

以上がスタイラスを知るの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。