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

Posted 2023-03-06

【中文标题】用于无 cookie 域的具有自定义 javascript 函数的 LESS CSS

【英文标题】：LESS CSS with custom javascript function for cookieless domain

【发布时间】：2012-09-21 08:44:06

【问题描述】：

我想使用 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 文档中最接近的示例如下，但没有构造 base-url 的函数。

@base-url: "http://assets.fnord.com";
background-image: url("@base-url/images/bg.png");

也许解决方案中也包含 LESS + Node.js 部分？

谢谢！

【参考方案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");

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

【参考方案2】：

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