3

我有一个小问题......有没有什么选择可以将多个背景与 LESS 混合？

我在LESS中有这个背景设置：

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

现在：我需要写出具有多个背景的输出样式，所以我这样做：

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

在最终输出中有些东西是不正确的，我有这个：

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

怎么了？是否可以这样做？

4

4 回答 4

10

我不知道原生地具有应用/循环通过 mixin 的所有参数的功能，但是有很多选项可以克服这个问题。

您可以将自定义 javascript 函数添加到执行所需操作的 less 块中。这是一个很好的自定义函数参考链接。

但是你也可以在 less 中构建一个小循环：

    // for loop
    .for(@l,@obg,@i:1) when (@l > @i) {
      @nbg: `@{url}[@{i}]`;
      @bg: ~"@{obg}, @{nbg} @{rest}";
      .for(@l, @bg, @i + 1);
    }

    // multiple background urls + additional bg properties
    .bgmixin(@url, @rest){
      @num: unit(`@{url}.length`);
      @bg: ~`@{url}[0]` @rest;
      .for(@num, @bg);
      background: ~"@{bg}";
    }

    // defining bg urls
    @url: 'url("../img/war_top_baner_gp.png")', 'url("../img/war_header_b‌g.png")';

    // including the bgmixin in .class
    .class{
      .bgmixin(@url, center top no-repeat transparent);
    }

输出是

    .class {
          background: url("../img/war_top_baner_gp.png") center top no-repeat transparent,
                      url("../img/war_header_b‌g.png") center top no-repeat transparent;
    }

如果我理解正确，这就是你想要的。

编辑：我只是想在这里补充一点，我的想法是找到一个更通用的解决方案，它实际上是通过数组元素循环/递归，这使得在它们各自的图像中使用不同的属性变得容易 - 所以你给函数提供一个数组urls 和其他属性的数组。在这里，我将尝试说明这个想法：

    .for(@l,@obg,@i:1) when (@l > @i) {
      @nbg: `@{url}[@{i}]`; @nattr: `@{attr}[@{i}]`;;
      @bg: "@{obg}, @{nbg} @{nattr}";
      .for(@l, @bg, @i + 1);
    }

    .bgmixin(@url, @attr){
      @num: unit(`@{url}.length`);
      @bg: ~`@{url}[0]` ~`@{attr}[0]`;
      .for(@num, @bg);
      background: ~"@{bg}";
    }

    @urls: "url('../img/centered_image_bg.png')", "url('../img/left_image_bg.png')";
    @attr: "center top no-repeat transparent", "left top y-repeat";

    .class{
      .bgmixin(@urls, @attr);
    }

输出将如下所示：

    .class {
        background: url('../img/centered_image_bg.png') center top no-repeat transparent,
                    url('../img/left_image_bg.png') left top y-repeat;
    }
于 2013-03-14T18:26:12.657 回答
5

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

下面允许通过将多个 url 作为单个字符串传递给第一个参数来输入多个 url，然后使用内联 javascript 对字符串进行替换并将这些 url 连接到其他参数。

较少的

.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')");
}

输出

.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;
}
于 2013-03-14T18:39:58.657 回答
1

要将逗号分隔的参数列表传递给 mixin，只需;在 mixin 调用中使用而不是逗号：

 .mixin(@bg, @color) {
   background: @bg;
   color: @color;
 }

 .class {
   .mixin(url('img/bg.png') no-repeat, red; white);
 }

输出：

.class {
  background: url('img/bg.png') no-repeat, #ff0000;
  color: #ffffff;
}
于 2013-10-11T08:02:56.277 回答
0

您不需要在 mixin 中粘合多个背景。您可以使用mergeLESS 语言的原生功能。

该merge功能允许将来自多个属性的值聚合到单个属性下的逗号或空格分隔列表中。merge对于背景和变换等属性很有用。

因此，您的 less 代码可能如下所示：

.element {
  background+: url("../1.png") center top no-repeat transparent;
  background+: url("../2.png") left top repeat;
  background+: url("../3.png") right top repeat;
}

这比复杂的 mixin 简单得多。

生成的CSS：

.element {
  background: url("../1.png") center top no-repeat transparent,
              url("../2.png") left top repeat, 
              url("../3.png") right top repeat;
}
于 2017-07-20T06:59:39.273 回答