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

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

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

キーポイント

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

何、別のもの？ ！

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

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

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

全體として、スタイラスとSASSはほぼ同じ機(jī)能をサポートしていますが、スタイラス機(jī)能の完全なリストを確認(rèn)できますが、畫期的なものは何も期待していません（ただし、新しい機(jī)能があります）。スタイラスは複數(shù)の構(gòu)文もサポートしていますが、境界は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>

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

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

基本的な構(gòu)文

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

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

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

変數(shù)

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

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

スタイラスは、SASSまたは他のプリプロセッサが行うことを行います：プロパティバリュールックアップ。幅の半分に等しい負(fù)の左マージンを適用するとしますが、幅を変數(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屬性に値を割り當(dāng)てていない限り、z-indexは1に設(shè)定されます。 Mixinと一緒に使用すると、本當(dāng)に何かがあります。

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

MIXIN

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

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

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

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

透明な混合物

と呼ばれます。

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

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

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

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

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

生成：

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

これは非常にクールなトリックであることを認(rèn)めなければなりません。混亂を招く可能性がありますが（危険になる可能性があります）、追加の値で標(biāo)準(zhǔn)のCSSプロパティを拡張できることは、実際には興味深い概念です。

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

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

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

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

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

最終的な考え

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

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

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

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

スタイラス（FAQ）

についてのFAQ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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