在同一個LESS文件中多個'for'循環

我正在嘗試使用LESS創建'for'循環來輸出不同顏色的樣式。在同一個LESS文件中多個'for'循環

我目前有兩個循環，應該輸出不同的樣式，但只有一個'循環'運行。

變量

@brands: zorg onderweg geld persoonlijk vrijetijd wonen najeleven; 

// Define our variable, add extension for our color variables 
.define(@var) { 
    @brand-color: '@{var}Color'; 
    @brand-shadow: '@{var}Shadow'; 
    @brand-hover: '@{var}Hover'; 
}

第一環路：

.buttons-loop() { 
    // Loop through all the variables and output colored CTA buttons 
    .for(@brands); .-each(@name) { 
     // After loop happens, it checks what brand is being called 
     .define(@name); 

     // Output Example: .zorg .cta (:hover, :active) 
     [email protected]{name} .cta { 
      background: @@brand-color; 
      box-shadow: 0 3px 0px @@brand-shadow; 

      &:hover { 
       background: @@brand-hover; 
       box-shadow: 0 3px 0px @@brand-shadow; 
      } 

      &:active { 
       background: @@brand-shadow; 
      } 
     } // @{name} .cta 
    } // .for(@brands) 
} 

.buttons-loop();

第二環路：

// Loop through all the variables and output colored meta tags 
.meta .theme { 
    .for(@brands); .-each(@name) { 
     // After loop happens, it checks what brand is being called 
     .define(@name); 

     // Output Example: .meta .thema.zorg 
     &[email protected]{name} { 
      color: @@brand-color; 

      a { 
       color: @@brand-color; 
      } 
     } // @{name} .cta 
    } // .for(@brands) 
}

當兩個循環是在文檔中，僅在第一（按鈕）循環運行，元標記循環不會運行。如果我添加了「HTML」標記作爲包裝中的按鈕循環：

.buttons-loop() { 

    html { 
     // Loop through all the variables and output colored CTA buttons 
     .for(@brands); .-each(@name) { 
      .. 

     } // .for(@brands) 
    } 
}

兩個迴路運行，但輸出html .brandColor .cta其運作按鈕循環，但感覺就像一個黑客攻擊。

我忘記了什麼，或者它不應該像這樣工作嗎？

感謝

來源

2017-04-03 Rick Doesburg

見https://github.com/seven-phases-max/less.curious/blob/master/articles/generic-for.md#multiple-loops-in-same-scope –

並請減少冗餘轉義的使用。（比如'@brands：〜「zorg」〜「onderweg」......;''應該只是'@brands：zorg onderweg ......;等等）。 –

@ seven-phases-max您好！首先感謝您創建'for'循環。我嘗試添加＆代替HTML標記，但這似乎不起作用。你能給我一些指點嗎？問題似乎是循環不能在類中運行，因爲第一個類是循環生成的類（？） –

用「父&」選擇固定的這一具體問題。

.cta { 
    // Loop through all the variables and output colored CTA buttons 
    .for(@brands); .-each(@name) { 
     // After loop happens, it checks what brand is being called 
     .define(@name); 

     // Output Example: .zorg .cta (:hover, :active) 
     [email protected]{name} & { 
      background: @@brand-color; 
      box-shadow: 0 3px 0px @@brand-shadow; 

      &:hover { 
       background: @@brand-hover; 
       box-shadow: 0 3px 0px @@brand-shadow; 
      } 

      &:active { 
       background: @@brand-shadow; 
      } 
     } // @{name} .cta 
    } // .for(@brands) 
}

來源

2017-04-03 14:21:54

你可以（也應該在這種情況下）接受你自己的答案;）。 –

@ seven-phases-max會做，需要等兩天;） –

在同一個LESS文件中多個'for'循環

回答

相關問題