在Less中连接字符串

Question

我认为这是不可能的，但我想问一下是否有方法。我的想法是我有一个指向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中是否可以将字符串连接在一起？

- juminoz

Answer 1

使用变量内插：

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

完整代码：

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

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

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

- Paul

---

谢谢你的回答！这太完美了。现在我可以确保即使上下文路径改变，也不会出现重构噩梦。 - juminoz

谢谢，我刚遇到了同样的问题，文档里没注意到这个。 - David

谢谢@Paulpro！我在使用VS Web Compiler插件时遇到了问题，它会更改我的background-image url，而我不太确定如何进行连接 :) - hatsrumandcode

对于那些可能会看到这篇答案但是想要将一个数字变量与像px或%这样的字符串组合使用的人，这里有一个提示：你可以在字符串前面加上波浪线~来取消引号，例如：width: ~"@{w}px"; - AsGoodAsItGets

Answer 2

正如您在文档中所看到的那样，您可以将变量和普通字符串与字符串插值一起使用:

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

- Stephan Hoyer

Answer 3

我也在寻找处理图片的相同技巧。我使用了一个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");
}

- user2725509

---

你好，欢迎！你认为为什么被接受的答案不再有效？是过时了吗？有技术改进了吗？它是错误的吗？为什么你的更好？ - STT LCU

Answer 4

对于类似于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);

- jordanb

---

不是逐字回答问题，但仍然是一个有用的技巧。 - trysis

Answer 5

不知道你是否正在使用less.js 或 lessphp（例如WordPress的WP-Less插件），但是在 lessphp 中，你可以通过使用 ~ 来“取消引用”字符串：http://leafo.net/lessphp/docs/#string_unquoting

- FelipeAls

---

这也适用于常规的LESS。我不知道在2012年写这篇答案时是否有效。 - trysis

Answer 6

使用Drupal 7。我使用了普通的加号，它正在工作：

@images_path+'bg.png'

- Gaba

---

除非他愿意为了将字符串连接起来在LESS/CSS中使用而学习Drupal，否则我认为你的建议毫无价值。不冒犯你，我只是这么说。 - ozanmuyes