用 Less 连接字符串

我认为这是不可能的，但我想我问，万一有一个办法。我的想法是，我有一个变量的路径到网络资源文件夹:

@root: "../img/";
@file: "test.css";
@url: @root@file;


.px {
background-image: url(@url);
}

我得到的结果是:

.px { background-image: url("../img/" "test.css"); }

但是，我希望这些字符串组合成像这样的一个字符串:

.px { background-image: url("../img/test.css"); }

有没有可能将字符串连接在一起？

77686 次浏览

小开

最佳答案

使用可变插值:

@url: "@{root}@{file}";

完整代码:

@root: "../img/";
@file: "test.css";


@url: "@{root}@{file}";


.px{ background-image: url(@url); }

小开

不知道你是使用 Less.js还是 lessphp (就像 WordPress 的可湿性粉剂插件) ，但是你可以用 lessphp 取消引用 ~: http://leafo.net/lessphp/docs/#string_unquoting中的字符串

小开

使用 Drupal 7。我使用了一个普通的加号，它起作用了:

@images_path+'bg.png'

小开

我正在寻找处理图像的相同技巧，我用混合语言来回答这个问题:

.bg-img(@img-name,@color:"black"){
@base-path:~"./images/@{color}/";
background-image: url("@{base-path}@{img-name}");
}

然后你可以使用:

.px{
.bg-img("dot.png");
}

或者

.px{
.bg-img("dot.png","red");
}

小开

正如你在文件中看到的，你也可以将字符串插值与可变字符串和普通字符串一起使用:

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

小开

对于那些类似字符串的单位值，如 transform: rotate(45deg)中的 45deg，使用 unit(value, suffix)函数。例如:

// Mixin
.rotate(@deg) {
@rotation: unit(@deg, deg);
-ms-transform: rotate(@rotation);
transform: rotate(@rotation);
}


// Usage
.rotate(45);


// Output
-ms-transform: rotate(45deg);
transform: rotate(45deg);