如何混合多个背景与LESS [英] How to mix multiple background with LESS

问题描述

我有一个小问题...
是否有任何选项可以与LESS混合多个背景？

  .background_centered（
 @url，
 @position_horizo​​ntal：center，
 @position_vertical： top，
 @ background-repeat：no-repeat，
 @transparency：transparent）{
 background：@arguments; 
} 
  

现在：我需要写出多个背景的put风格，所以我执行此操作：

  .class {
 .background_centered（url（'../ img / war_top_baner_gp.png'） ，url（'../ img / war_header_bg.png'））; 
} 
  

在最终输出中不正确bc：

  background：url（'/../ img / war_top_baner_gp.png'）
 url（'/../ img / war_header_bg .png'）top no-repeat transparent; 
  

有什么问题？是否可以这样做？

解决方案

在LESS中将多个属性值传递到单个属性是具有挑战性的。我们当前的代码显然适用于单个背景。要获得多个，你必须通常使用字符串。

以下允许通过将多个网址作为单个字符串传递给第一个参数来输入多个网址，然后使用内联javascript对字符串进行替换，

  .background_centered（
 @urls，
 @position_horizo​​ntal：center，
 @position_vertical：top，
 @ background-repeat：no-repeat，
 @transparency ：transparent）{
 
 @combinedValues：〜@ {position_horizo​​ntal} @ {position_vertical} @ {background-repeat} @ {transparency}; 
 @urlsRewrite：〜`@ {urls} .replace（/ \）/ g，'）@ {combinedValues}'）`; 
 background：@urlsRewrite; 
} 
 
 .class {
 .background_centered（url（'../ img / war_top_baner_gp.png'），url（'../ img / war_header_bg.png' ））; 
} 
  

输出

  .class {
 background：url（'../ img / war_top_baner_gp.png'）center top no-repeat transparent，url /img/war_header_bg.png'）center top no-repeat transparent; 
} 
  

I have a small question... Is there any option to mix multiple background with LESS?

I have this setup for background in LESS:

.background_centered(
  @url,
  @position_horizontal: center,
  @position_vertical: top,
  @background-repeat: no-repeat,
  @transparency: transparent) {
    background: @arguments;
}

now: i need to write in out put style with multiple background, so i do this:

.class {
   .background_centered(url('../img/war_top_baner_gp.png'),url('../img/war_header_bg.png'));
}

something is not right bc in final output i have this:

background: url('/../img/war_top_baner_gp.png') 
            url('/../img/war_header_bg.png') top no-repeat transparent;

what is wrong? Whether or not it is possible to do so?

解决方案

It is challenging in LESS to pass multiple property values to a single property. YOur current code obviously works well for single backgrounds. To get multiple, you have to usually work with strings.

The following allows multiple urls to be input by passing them as a single string to the first parameter, and then uses inline javascript to do a replacement on the string and concatenate those urls to the other parameters.

LESS

.background_centered(
  @urls,   
  @position_horizontal: center,
  @position_vertical: top,
  @background-repeat: no-repeat,
  @transparency: transparent ) {

  @combinedValues: ~"@{position_horizontal} @{position_vertical} @{background-repeat} @{transparency}";
  @urlsRewrite: ~`@{urls}.replace(/\)/g, ') @{combinedValues}')`;
  background: @urlsRewrite;
}

.class {
   .background_centered("url('../img/war_top_baner_gp.png'), url('../img/war_header_bg.png')");
}

Output

.class {
  background: url('../img/war_top_baner_gp.png') center top no-repeat transparent, url('../img/war_header_bg.png') center top no-repeat transparent;
}

这篇关于如何混合多个背景与LESS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！