styluscss フレームワークの使用法_html/css_WEB-ITnose

Stylus はコンパイルが必要な CSS 言語なので、独自のファイルを HTML から直接呼び出すことはできません。CSS ファイルにコンパイルしてから毎日読み込む必要があります。

stylus は、node.js のサポートを必要とする優れた CSS コンパイル言語です。最初のステップは、node.js をインストールすることです

2 ノード - v ノードのバージョン情報がある場合は、ノードのバージョン情報を確認します。インストールは成功しました

3 スタイラスをインストールします

    # apt-get update      # apt-get install -y python-software-properties software-properties-common # add-apt-repository ppa:chris-lea/node.js # apt-get update # apt-get install nodejs 

4 スタイラスのデバッグ (Ctrl+D)

# npm install stylus

返されるかどうかを確認します

# styusborder-radius()  -webkit-border-radius arguments  -moz-border-radius arguments  border-radius arguments  body  font 12px Helvetica, Arial, sans-serif  a.button  border-radius(5px)

5 styus ファイルのコンパイル

テストファイルを作成します。ファイルの内容は次のとおりです:

body {  font: 12px Helvetica, Arial, sans-serif;}a.button {  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}

保存して閉じ、コマンド ラインで次のコマンドを実行します:

 1 border-radius() 2   -webkit-border-radius arguments 3   -moz-border-radius arguments 4   border-radius arguments 5    6 body 7   font 12px Helvetica, Arial, sans-serif 8    9 a.button10   border-radius 5px

test.css ファイルを取得して、内容が次のようになっているかどうかを確認します。

# stylus --compress < test.styl > test.css

そんなスタイラスファイルは HTMLで呼び出せるCSSファイルにコンパイルされています。

付録:

コンパイルされたファイルの例

stylus はファイルとディレクトリも受け入れます。たとえば、css という名前のディレクトリはコンパイルされ、同じディレクトリに .css ファイルが出力されます。

1 body{2 font:12px Helvetica,Arial,sans-serif3 }4 a.button{5 -webkit-border-radius:5px;6 -moz-border-radius:5px;7 border-radius:5px8 }

以下は ./public/stylesheets に出力されます:

$ stylus css

またはいくつかのファイル:

$ stylus css --out public/stylesheets

開発目的の場合、linenos オプションを使用して、生成されたファイルに Stylus ファイル名と行番号を表示する命令を発行できます。 CSS。

$ stylus one.styl two.styl

または、firebug の FireStylus 拡張機能を使用したい場合は、firebug オプションを使用します。

$ stylus --line-numbers <path>

CSS の変換

CSS を簡潔な Stylus 構文に変換したい場合は、--css フラグを使用できます。

標準入力経由の出力:

$ stylus --firebug <path>

同じベース名を持つ .styl ファイルを出力します。

$ stylus --css < test.css > test.styl

出力固有のターゲット:

$ stylus --css test.css

CSS プロパティ ヘルプ

OS X では、スタイラス ヘルプ 23ac7bbddc590263b57e27da10ea2cdf がデフォルトのブラウザを開き、指定された 23ac7bbddc590263b57e27da10ea2cdf プロパティのヘルプ ドキュメントを表示します。

$ stylus --css test.css /tmp/out.styl

インタラクティブ シェル

スタイラス REPL (Read-Eval-Print-Loop) または「インタラクティブ シェル」を使用すると、端末上でスタイラス式を直接操作できます。

セレクターなどではなく、式のみが有効であることに注意してください。簡単にするために、-i または --interactive フラグを追加します。

$ stylus help box-shadow

プラグインの使用

この例では、nibStylus プラグインを使用して、CLI の使用法を説明します。

次のスタイラスがあるとします。これは nib をインポートし、nib の Linear-gradient() メソッドを使用します:

$ stylus -i> color = white=> #fff> color - rgb(200,50,0)=> #37cdff> color=> #fff> color -= rgb(200,50,0)=> #37cdff> color=> #37cdff> rgba(color, 0.5)=> rgba(55,205,255,0.5)

stylus(1) を使用して標準入出力経由でレンダリングしようとする最初のものは次のようになります:

@import 'nib'body  background: linear-gradient(20px top, white, black) 

Stylus はペン先の場所がわからないため、次のエラーが発生する可能性があります。

$ stylus < test.styl

Stylus API のプラグインを簡単に適用する場合は、検索パスを追加できます。 --include または -I フラグを使用すると、次のようになります。

Error: stdin:3    1|     2|   > 3| @import 'nib'    4|     5| body    6|   background: linear-gradient(20px top, white, black)

これで、生成されたコンテンツは次のようになります。 gradient-data-uri() と create-gradient-image() がリテラル形式で出力されていることにお気づきかもしれません。これは、プラグインが JavaScript API を提供する場合、プラグインへのパスを公開するだけでは十分ではないためです。ただし、純粋なスタイラスペン先の機能だけが必要な場合は、それで十分です。

$ stylus < test.styl --include ../nib/lib

それでは、 --use または -u フラグを使用する必要があります。ノード モジュール (拡張子 .js の有無にかかわらず) パスが検索されます。ここでの require() モジュールは、プラグイン (js 関数の定義など) を公開するために style.use(fn()) を呼び出すことがあります。

body {  background: url(gradient-data-uri(create-gradient-image(20px, top)));  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));  background: -webkit-linear-gradient(top, #fff 0%, #000 100%);  background: -moz-linear-gradient(top, #fff 0%, #000 100%);  background: linear-gradient(top, #fff 0%, #000 100%);}

は次のように生成されます:

$ stylus < test.styl --use ../nib/lib/nib