スタイラスCSSフレームワークの使い方を詳しく解説

以下のエディターでは、スタイラスCSSフレームワークの使用方法を詳しく説明します。編集者はそれが非常に優れていると考えているので、今すぐあなたと共有し、参考として提供したいと思います

Stylus はコンパイルする必要がある CSS 言語であるため、独自のファイルを HTML から直接呼び出すことはできません。毎日のロードを使用する前に CSS ファイルにコンパイルされます。

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

質問: Windows のデバッグ中に ctrl+d は効果がありません。デバッグを直接出力するにはどうすればよいですか? windows? コード

備考: # は、この行が Enter および run 行であることを意味します。

公式 Web サイトから Nodejs をダウンロードします

１

tar xvf node-v0.10.28.tar.gz    
#  cd node-v0.10.28    
#  ./configure    
# make    
# make install    
# cp /usr/local/bin/node /usr/sbin/

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

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

# npm install stylus -g 注: -g を見つけて、グローバル メソッドとして環境を設定する必要があります

4 スタイラスのデバッグ

# stylus   
border-radius()   
  -webkit-border-radius arguments   
  -moz-border-radius arguments   
  border-radius arguments   

body   
  font 12px Helvetica, Arial, sans-serif

a.button   
  border-radius(5px)

Ctrl+D を入力して、返された結果をデバッグします

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

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

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

次の内容の test.styl ファイルを作成します:

border-radius()   
  -webkit-border-radius arguments   
  -moz-border-radius arguments   
  border-radius arguments   

body   
  font 12px Helvetica, Arial, sans-serif

a.button   
  border-radius 5px

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

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

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

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

このようなスタイラス ファイルがコンパイルされます。 htmlで呼び出せるcssファイルに変換します。

付録:

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

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

$ stylus css --out public/stylesheets またはいくつかのファイル:

$ stylus one.styl two.styl 開発目的には、 linenos オプションは、生成された CSS に Stylus ファイル名と行番号を表示する命令を発行します。

$ stylus --line-numbers または、firebug の FireStylus 拡張機能を使用する場合は firebug オプション。

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

標準入力による出力:

$ stylus --css < test.css > test.styl は同じベース名を持つ .styl ファイルを出力します。

$ stylus --css test.css 特定のターゲットを出力します:

$ stylus --css test.css /tmp/out.stylCSSプロパティのヘルプ
OS X では、スタイラス ヘルプ が開きます。ブラウザにアクセスして、指定された プロパティのヘルプ ドキュメントを表示します。

$ stylus help box-shadow Interactive Shell
Stylus REPL (Read-Eval-Print-Loop) または "Interactive Shell" を使用すると、端末の Formula 上で直接 Stylus の 式を操作できます。

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

=> #fff

> カラー -= rgb(200,50,0)
=> => rgba(55,205,255,0.5) -in
この例では、nibStylus プラグインを使用して、CLI の使用法を説明します。

次のようなスタイラスがあり、ペン先をインポートし、ペン先の Linear-gradient() メソッドを使用するとします。 stdin 経由で stylus(1) を使用して最初にレンダリングしようとすると、次のようになります:

$ stylus < test.styl これは、Stylus がペン先の場所を知らないため、次のようなエラーを生成する可能性があります。 : stdin:3
1|
> 3| @import 'nib'
4| ボディ
6| 単純なアプリケーションの場合私たちのプラグインでは、検索パスを追加できます。 --
include
または -I フラグを使用すると、

$ stylus < test.styl --include ../nib/lib が次のコンテンツを生成します。 gradient-data-uri() と create-gradient-image() がリテラル形式で出力されていることにお気づきかもしれません。これは、プラグインが

JavaScript

API を提供する場合、プラグインのパスを公開するだけでは十分ではないためです。しかし、純粋なスタイラスペン先

機能

だけが欲しいのであれば、それで十分です。

りー

因此，我们需要做的是使用--use或-u标志。其会找寻node模块（有或者没有.js扩展名）路径，这里的require()模块或调用style.use(fn())来暴露该插件（定义js函数等）。

$ stylus < test.styl --use ../nib/lib/nib生成为：

body {   
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAABmJLR0QA/wD/AP+gvaeTAAAAI0lEQVQImWP4+fPnf6bPnz8zMH358oUBwkIjKJBgYGNj+w8Aphk4blt0EcMAAAAASUVORK5CYII=");   
  background: -webkit-gradient(linear, left top, left bottombottom, 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%);   
}

nodemon 插件

# npm install nodemon -g

var css = require("stylus"),    
    str = require("fs").readFileSync("style.styl", "utf8");   

css.render(str, { filename: "stylus.styl" }, function(err, css) {   
    if (err) throw err;   
    var http = require('http');   
    http.createServer(function (req, res) {   
        res.writeHead(200, {'Content-Type': 'text/css'});   
        res.end(css);   
    }).listen(1337, '127.0.0.1');   
    console.log('已经启动 http://www.php.cn/:1337/');   
});

以上这篇stylus css 框架使用方法深入解析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

以上がスタイラスCSSフレームワークの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。