url()

資料 URI 影像內嵌

Stylus 附帶一個名為 url() 的選用函式，它會取代文字 url() 呼叫（並使用 base64 資料 URI 有條件地將它們內嵌）。

範例

函式本身可透過 require('stylus').url 取得。它接受一個 options 物件，傳回一個函式，當 Stylus 看見 url() 時會在內部呼叫。

.define(name, callback) 方法指定一個 JavaScript 函式，可從 Stylus 來源呼叫。在此情況下，由於我們的影像位於 ./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)。我們可以傳遞 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 的 `utf8` 編碼

由於影像的 base64 編碼實際上會增加原始大小，因此您可以在內嵌 SVG 時選擇使用 utf8 編碼。

有一個 bif 可用於此：embedurl

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

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

會產生 utf 編碼的內嵌 SVG，而不是 base64 編碼。

如果您想要使用 JS 定義，以便可以在 utf 編碼中使用 paths，您需要使用另一個名稱來定義它，而不是 url()。這是因為 Stylus 中解析 url() 函數的方式：現在無法傳遞額外的參數給它，所以您不能只呼叫 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
  });

您就可以像使用 embedurl 一樣使用 inline-url bif，但增加了 paths 功能

.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 影像解析度路徑

url() #

資料 URI 影像內嵌 #

範例 #

SVG 的 utf8 編碼 #

選項 #

url()

資料 URI 影像內嵌

範例

SVG 的 `utf8` 編碼

選項