CSS 在 Less 中连接字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10256412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Concatenate strings in Less
提问by juminoz
I think this is not possible, but I thought I ask in case there is a way. The idea is that I have a variable for path to web resource folder:
我认为这是不可能的，但我想我会问，以防万一。这个想法是我有一个用于网络资源文件夹路径的变量：
@root: "../img/";
@file: "test.css";
@url: @root@file;
.px {
background-image: url(@url);
}
I get this as a result:
我得到这个结果：
.px { background-image: url("../img/" "test.css"); }
But, I want the strings to combine into one string like this:
但是，我希望这些字符串像这样组合成一个字符串：
.px { background-image: url("../img/test.css"); }
Is it possible to concatenate strings together in Less?
是否可以在 Less 中将字符串连接在一起？
回答by Paul
使用变量插值：
@url: "@{root}@{file}";
Full code:
完整代码：
@root: "../img/";
@file: "test.css";
@url: "@{root}@{file}";
.px{ background-image: url(@url); }
回答by Stephan Hoyer
As you can see in the documentation, you can use string interpolation also with variable and plain strings together:
正如您在文档中所见，您还可以将字符串插值与变量和普通字符串一起使用：
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
回答by user2725509
I was looking for the same trick for handling images. I used a mixin to answer this:
我正在寻找处理图像的相同技巧。我用一个 mixin 来回答这个问题：
.bg-img(@img-name,@color:"black"){
@base-path:~"./images/@{color}/";
background-image: url("@{base-path}@{img-name}");
}
Then you can use :
然后你可以使用：
.px{
.bg-img("dot.png");
}
or
或者
.px{
.bg-img("dot.png","red");
}
回答by jordanb
For those string-like unit values like 45degin transform: rotate(45deg)use the unit(value, suffix)function.
Example:
对于那些绳状部等的值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);
回答by FelipeAls
Don't know if you're using less.jsor lessphp (like in WP-Lessplugin for WordPress) but with lessphp you can "unquote" strings with ~: http://leafo.net/lessphp/docs/#string_unquoting
不知道您使用的是less.js还是 lessphp（例如WordPress 的WP-Less插件），但是使用 lessphp，您可以使用以下命令“取消引用”字符串~：http: //leafo.net/lessphp/docs/#string_unquoting
回答by Gaba
Using Drupal 7. I've used an ordinary plus mark and it's working:
使用 Drupal 7。我使用了一个普通的加号并且它正在工作：
@images_path+'bg.png'
