在同一个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'循环

回答

相关问题