具有自定义javascript函数的LESS CSS用于无cookieless域

Question

我想用更少的(http://lesscss.org/)而不是sass(http://sass-lang.com/)进行预处理css。我有一组用于静态资源的无Cookie域。例如：0.mydomain.com、1.mydomain.com和2.mydomain.com等。我想使用less编译CSS，以便将无cookieless域注入到编译的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部分？

谢谢！

Answer 1

您应该能够使用LeSS嵌入js:的能力来实现这一点

.background(@path) {
background-image: ~`(function(){ var protocol = "http://"; var domain = ".mydomain.com"; var N = 4; var sum = 0; var s = @{path}.substr(@{path}.lastIndexOf("/") + 1); for (var i = 0; i < s.length; i++) { sum += s[i].charCodeAt(); } return "url(" + protocol + (sum % N) + domain + @{path} + ")";})()`;
}
.myItem {
.background("/images/background.jpg");
}

不知道性能会是什么样子，但如果你在处理服务器端，你就不在乎了，而客户端会缓存，所以应该不会有问题。

Answer 2

否。LESS的特性比Sass少得多(没有函数，没有循环)。你必须使用mixin才能远程完成任何类似的操作。Sass可以做到这一点，只是它没有内置任何字符串操作函数，所以你必须编写一些Ruby代码才能添加这些函数。