我想使用 less ( http://lesscss.org/ ) 而不是 sass ( http://sass-lang.com/ ) 来预处理 css。我有一组用于静态资源的无 cookie 域。例如:0.mydomain.com、1.mydomain.com、2.mydomain.com 等。我想使用 less 编译 CSS,以便将无 cookie 域注入到编译后的 CSS 输出中。我发现使用@function 在 sass 文档中创建自定义函数的能力。是否存在等价物(我找不到)?我需要一个执行散列算法的函数,将文件名转换为对应于无 cookie 域 (X.mydomain.com) 的数字 X。如何使用更少的资源来做到这一点?
下面的例子是为了说明而设计的:
在 my.less 文件中:
@function domainX(path) {
//configs
var protocol = "http://";
var domain = ".mydomain.com"
var N = 4; //4 cookieless domains
var sum = 0;
var s = path.substr(path.lastIndexOf("/") + 1);
for (var i = 0; i < s.length; i++) {
sum += s[i].charCodeAt();
}
@return protocol + (sum % N) + domain + path;
}
.myItem {background-image:url(domainX('/images/background.jpg')) }
这将生成编译输出
.myItem {background-image:url('http://1.mydomain.com/images/background.jpg') }
SASS 示例是 http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#functions
请参阅“功能指令”部分
下面是 LESS 文档中最接近的示例,但没有构造基本 URL 的函数。
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
也许解决方案中也有 LESS + Node.js 部分?
谢谢!