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

Question

我想使用 less ( http://lesscss.org/ ) 而不是 sass ( http://sass-lang.com/ ) 来预处理 css。我有一组用于静态资源的无 cookie 域。例如:0.mydomain.com、1.mydomain.com、2.mydomain.com 等。我想使用 less 编译 CSS，以便将无 cookie 域注入(inject)编译后的 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 文档中最接近的示例，但是没有构建 base-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");
}

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