手写笔中的替换功能

Question

我有包含该代码的 Stylus 文件：

body
  background url('/templates/main/img/sprites/ico-soc.png') 100px 100px no-repeat

我需要函数（mixin）background，它将从图像的引用中删除“/templates/main/”

body
      background url('img/sprites/ico-soc.png') 100px 100px no-repeat

请帮帮我）我想也许我走错了方向，有一个简单的方法可以解决这个问题。请注意，我需要该功能。不要主动为目录创建变量！

我就是这么干的

我做了函数

background()
  background arguments

然后我尝试通过两种方式解决问题 1）我试图找到一个替代功能。但失败了。然后我尝试使用文档的决定（功能替换）。但它不适合我的情况。 http://learnboost.github.io/stylus/docs/bifs.html#add-propertyname-expr

2) 我通过函数use(path) (http://learnboost.github.io/stylus/docs/bifs.html#usepath)在js上写了我的函数。但是我遇到了问题，进入 js 函数的值不正确。有多余的空格。

style.styl

use("add.js")

background()
  background arguments

body
  background url('img/sprites/ico-soc.png') 100px 100px no-repeat

add.js

    var plugin = function(){
    return function(style){
        style.define('add', function(a) {
            console.log(typeof a);
            console.log(a);
        });
    };
};
module.exports = plugin;

Answer 1

您可以使用 current-property 重新定义 url 函数并检查它是否是从 background 调用的。例如：

url(str)
  if current-property && current-property[0] == 'background'
    str = replace('/templates/main/', '', str)

  return unquote('url(' + str + ')')

body
  background: url('/templates/main/img/sprites/ico-soc.png') 100px 100px no-repeat

编译为：

body {
  background: url(img/sprites/ico-soc.png) 100px 100px no-repeat;
}

手写笔中的替换功能

replacing function in stylus

javascript

stylus