2

スタイラスは見栄えがしますが、チュートリアルはまったくありません。Stylusの設定方法を教えてください。つまり：

このようなすべての JavaScript コマンドをどこに、どのファイルに配置するか。

stylus(str)
    .set('filename', __dirname + '/css/test.styl')
    .define('url', stylus.url({ paths: [__dirname + '/public'] }))
    .render(function(err, css){

    });

たとえば、ベースパスを含むcss変数が必要です：

background('bas_path/image.png);
4

1 に答える 1

1

Stylus の使用に関するチュートリアルがないことはかなり認識しており、おそらく何らかのブログ投稿として、自分でチュートリアルを作成するつもりです。私はただブログに入る必要があります。ずっと放置してました。

まず、Stylus を使用するには、 Node.JSをインストールする必要があります。これは、Stylus を開始して使用するための最も簡単で最も推奨される方法です。Stylusは、ここに示されているようにブラウザで動作しますが、それを行う方法を正確に見つけること自体が課題です。

チュートリアルはありませんが、実際に習得するのは難しいことではありません。あなたの質問に答えると、Stylus はいくつかの異なる方法で使用できるため、Stylus の使用方法によって異なります。

最初の方法は、単純にファイルを書き込ん.stylでから、Stylus の組み込み実行可能ファイルを使用してファイルを監視し、CSS にコンパイルすることです。そのドキュメントはここにあります。

2 番目の方法では、質問のコードを使用します。そのコードをどのファイルに入れるかは問題ではありませんrequire('stylus')。Stylus のドキュメントは 100% 完全ではありませんが、2 回読み返すと、すべての質問に実際に答えていることがわかります。

3 番目の方法は、Connectミドルウェアを使用する方法で、それに関するドキュメントもあります。Connectミドルウェアは の場合とまったく同じで、ExpressJS'connect' への参照を 'express' に交換するだけです。

バックグラウンド ミックスインでのベース パス変数の参照に関しては、実際にはかなり単純です。

次のように変数を設定します。

base-path = 'img/path/'

次に、ミックスインを作成します。

bg-image(image)
  background: url(base-path + image)

そして最後に、単純なプロパティであるかのように mixin を呼び出します。

body
  bg-image: 'image.png'

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

body {
  background: url("img/path/image.png");
}

スタイラスに関するまともなチュートリアルを書き、ここにリンクを追加したら、近いうちにこの回答に戻ってきます。なので、気になる方は気長に待ちましょう。

于 2013-06-01T13:02:03.150 に答える