4

我想使用 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 部分？

谢谢！

4

2 回答 2

6

您应该能够使用 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");
}

不知道性能会如何，但是如果您正在处理服务器端，您将不在乎，而客户端它会缓存，所以应该不是问题。

于 2012-10-18T16:32:45.543 回答
2

不。LESS 的功能比 Sass 少得多（没有函数，没有循环）。您必须使用 mixin 来远程执行类似的操作。Sass 可以做到这一点，只是它没有内置任何字符串操作函数，因此您必须编写一些 Ruby 代码来添加这些函数。

于 2012-09-30T03:09:42.670 回答