如何混合多個背景與LESS

Question

我有一個小問題... 是否有任何選項可以混合多個背景與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')); 
} 

東西是不正確BC在最終輸出我有這個：

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

有什麼不對？是否有可能這樣做？

Answer 1

它是在更短的具有挑戰性的多個屬性值傳遞給單個屬性。 Y我們目前的代碼顯然適用於單一背景。要獲得多個，你必須通常使用字符串。

以下允許通過將多個url作爲單個字符串傳遞給第一個參數來輸入，然後使用內聯javascript對字符串進行替換並將這些url連接到其他參數。

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

輸出

.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; 
} 

Answer 2

我不知道本質上具有應用/循環mixin的所有參數的功能，但是有很多選項可以解決這個問題。

您可以將自定義JavaScript函數添加到您想要的更少的塊。 Here is a link to a nice reference for custom functions。

但你也可以只建立一個小的循環中少：

// 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; 
    } 

如果我理解你的權利，這是你想要的。

---

編輯：我只是想在這裏補充一點，我在這裏的想法是要發現實際上是循環/通過數組元素遞歸一個更通用的解決方案，它可以很容易地與各自的圖像使用不同的屬性 - 所以你給這個函數提供了一個url數組和其他屬性數組。在這裏，我會盡力來說明這個想法：

.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; 
    } 

Answer 3

要傳遞的逗號分隔的參數列表一個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; 
} 

Answer 4

你不需要在mixin中粘貼幾個背景。您可以使用LESS語言的原生merge功能。

的merge特徵允許在一個單一的 屬性從多個 屬性聚集值插入逗號或空格分隔的列表。 merge對於諸如背景和 等屬性非常有用。

所以，你更少的代碼可能看起來像：

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

這比複雜的混入簡單得多。

生成的css：

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