url() #

Data URIによる画像インライン化 #

Stylusには、リテラルなurl()呼び出しを置き換え（そして条件付きでbase64 Data URIを使用してインライン化）する、オプションの関数url()がバンドルされています。

例 #

関数自体は、require('stylus').url経由で利用できます。これはoptionsオブジェクトを受け取り、Stylusがurl()を検出したときに内部的に呼び出す関数を返します。

.define(name, callback)メソッドは、Stylusソースから呼び出すことができるJavaScript関数を割り当てます。この場合、画像は./css/imagesにあるため、pathsオプションは無視できます（デフォルトでは、画像の検索はレンダリングされるファイルに対して相対的に実行されます）。しかし、必要に応じてこの動作を変更できます。

stylus(str)
  .set('filename', __dirname + '/css/test.styl')
  .define('url', stylus.url())
  .render(function(err, css){
    // render it
  });

stylus(str)
  .set('filename', __dirname + '/css/test.styl')
  .define('url', stylus.url())
  .render(function(err, css){
    // render it
  });

例えば、画像が./public/imagesにあるとします。url(images/tobi.png)を使用したいとします。publicディレクトリをpathsに渡すことで、検索プロセスの一部にすることができます。

同様に、url(tobi.png)を使用したい場合は、paths: [__dirname + '/public/images']を渡すことができます。

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

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

SVGのUTF-8エンコーディング #

画像をbase64でエンコードすると、元のサイズが実際には増加するため、SVGをインライン化するときにUTF-8エンコーディングを使用するオプションがあります。

これには、ビルトイン関数embedurlがあります。

.embed-with-utf8 {
  background-image: embedurl("circle.svg", "utf8");
}

.embed-with-utf8 {
  background-image: embedurl("circle.svg", "utf8");
}

これにより、base64ではなくUTF-8でエンコードされたインラインSVGになります。

JSの`define`を使用して、UTFエンコーディングと共に`paths`を使用したい場合は、`url()`ではなく別の名前で定義する必要があります。これは、Stylusで`url()`関数がどのように解析されるかによるものです。現在、追加のパラメータを渡すことは不可能なため、エンコーディングを設定するために2番目のパラメータで`url`を呼び出すことはできません。しかし、別の名前で`url`を定義すれば、

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

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

`paths`機能を追加した`embedurl`と同様に`inline-url`ビルトイン関数を使用できます。

.embed-with-utf8-at-path {
  background-image: inline-url("tobi.svg", "utf8");
}

.embed-with-utf8-at-path {
  background-image: inline-url("tobi.svg", "utf8");
}

オプション #

• limit バイトサイズ制限（デフォルトは30KB（30000）、制限を無効にするにはfalseを使用します。
• paths 画像解決パス