スタイラス（スタイルシート言語）

スタイラス
デザイン：	TJ ホロウェイチュク
開発者	LearnBoost（2011年3月29日- 2015年3月26日）/Automattic（2015年3月26日- 現在）
初登場	2010年; 15年前
安定版リリース	0.63.0 / 2024年3月5日; 9か月前
タイピングの規律	動的
OS	クロスプラットフォーム
ライセンス	MITライセンス
ファイル名拡張子	.styl
Webサイト	スタイラス (Github)
影響を受けた
	CSS、Sass、Less

Stylusは、カスケーディングスタイルシート（CSS）にコンパイルされる動的スタイルシートプリプロセッサ言語です。その設計はSassとLessの影響を受けています。これは、 4番目によく使用されるCSSプリプロセッサ構文と見なされています。^{[3]これは、}Node.jsの元プログラマーであり、Luna言語の作成者であるTJ Holowaychukによって作成されました。JADEとNode.jsで書かれています。

セレクター

宣言ブロックの開始と終了に中括弧を使用する CSS とは異なり、インデントが使用されます。また、セミコロン (;) は省略することもできます。したがって、次の CSS は次のようになります。

本体{色:白; }

次のように短縮できます。

ボディカラー：ホワイト

さらに、コロン（:）とカンマ（,）もオプションです。つまり、上記の記述は次のようにも書けます。

ボディカラーホワイト

Stylus では変数を定義できますが、Less や Sass とは異なり、変数を定義するためにシンボルを使用しません。また、変数の割り当ては、プロパティとキーワードを区切ることで自動的に行われます。この点では、変数はPythonの変数に似ています。

メッセージ= 'Hello, World!'  

div ::コンテンツメッセージ前の
色# ffffff

Stylus コンパイラは上記のドキュメントを次のように変換します。

div :: before { content : 'Hello, World!' ; color : #ffffff ; }

ミックスインと関数はどちらも同じ方法で定義されますが、適用方法は異なります。

たとえば、さまざまなベンダープレフィックスを使用せずに CSS 境界半径プロパティを定義したい場合は、次のように作成できます。

ボーダー半径( n ) 
-webkit-border-radius n -moz-border-radius nボーダー半径n

これをミックスインとして含めるには、次のように参照します。

div .長方形の境界半径( 10px )

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

div.rectangle { -webkit- border -radius : 10 px ; -moz- border -radius : 10 px ; border-radius : 10 px ; }

引数や識別子に変数を含めるには、変数を中括弧で囲みます。たとえば、

 -webkit- { '境界線' + '-半径' }

次のように評価されます

-webkit の境界線の半径