在 Less 中连接字符串答案

【问题标题】：Concatenate strings in Less在 Less 中连接字符串
【发布时间】：2016-05-28 11:58:38
【问题描述】：

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

@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 中将字符串连接在一起？

【问题讨论】：

标签： css path web less concat

【解决方案1】：

使用Variable Interpolation:

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

完整代码：

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

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

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

【讨论】：

感谢您的回答！太棒了。现在我可以确保即使上下文路径发生变化，也不会出现重构噩梦。
谢谢，我刚刚遇到了同样的问题，但在文档中错过了。
感谢@Paulpro！我在使用 VS Web Compiler 插件时遇到问题，它正在更改我的背景图像 url，我不太确定如何进行连接 :)
只是给那些可能会得到这个答案但正在尝试使用它的人的说明，例如将数字变量与 px 或 % 之类的字符串组合：您可以通过在字符串前面加上波浪号 ~ 来取消对字符串的引用，例如：width: ~"@{w}px";

【解决方案2】：

正如您在documentation 中看到的，您还可以将字符串插值与可变字符串和普通字符串一起使用：

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

【讨论】：

【解决方案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");
}

【讨论】：

您好，欢迎您！为什么您认为接受的答案不再有效？过时了吗？有没有技术改进？这是不对的？为什么你的更好？

【解决方案4】：

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

【讨论】：

从技术上讲不能回答这个问题，但仍然是一个有用的技巧。

【解决方案5】：

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

【讨论】：

这也适用于常规 LESS。我不知道在 2012 年写这个答案时是不是这样。

【解决方案6】：

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

@images_path+'bg.png'

【讨论】：

除非他愿意为了连接字符串而学习 Drupal 以便在 LESS/CSS 中使用它，否则我认为您的建议毫无价值。无意冒犯，我只是说。