在Less中连接字符串

我认为这是不可能的，但我想我要是有办法的话。我的想法是，我有一个用于Web资源文件夹路径的变量：

@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"); }

是否可以在Less中将字符串连接在一起？

使用变量插值：

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

完整代码：

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

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

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

如您在文档中所见，您还可以将字符串插值与变量字符串和纯字符串一起使用：

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

我一直在寻找相同的技巧来处理图像。我用一个mixin来回答这个问题：

.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");
}

对于使用中的类似字符串的单位值45deg，transform: rotate(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);

不知道您使用的是less.js还是lessphp（例如WordPress的WP-Less插件中的），但是使用lessphp可以使用以下方法“取消引用”字符串~：http : //leafo.net/lessphp/docs/#string_unquoting

使用Drupal7。我使用了普通的加号，并且可以正常工作：

@images_path+'bg.png'