是否可以从mixin函数参数中混入？

Question

基本上，我希望能够循环创建中断点，比如说中心块类。

代码：

.centre-block { 
    margin: 0 auto; 
} 

@breakpoints: xs 479px, sm 767px, md 991px, lg 1200px; 

.make-classes(centre-block, @breakpoints); 

.make-classes(@prefix, @list) { 
    .iter(length(@list)); 

    .iter(@i) when (@i > 0) { 
     .iter(@i - 1); 

     @pair: extract(@list, @i); 
     @key: extract(@pair, 1); 
     @value: extract(@pair, 2); 

     @media (max-width: @value) { 
      .@{prefix}-@{key} { 
       .@{prefix}; 
      } 
     } 

    } 
} 

从这一点，我希望能够做的就是添加一个类，说centre-block-sm，当屏幕尺寸768px下.centre类margin: 0 auto将被应用。但我希望能够为许多类的类型做到这一点，例如添加一个no-padding-*班级列表。

除了事实上它不会使用.@{prefix}，而是完全不能识别它。如果我用.centre-block代替.@{prefix}它可以工作。有没有办法解决这个问题，或许是解决问题的另一种方法？

我觉得这种功能是LESS设计的功能，所以我可能完全忽略了这一点。

Answer 1

你正在尝试做什么目前不可能与更少。你可以在this thread中找到这个讨论。尽管这里没有太多的解释，但你可以看到其中的链接线程（＃1133）提到了这个功能还没有实现。

你可以看看使用detached rulesets作为替代。在您的代码中，将顶级类选择器（.centre-block）转换为分离的规则集，将其存储为变量，然后将其作为一个参数传递给mixin。然后，我们可以在mixin调用中调用此规则集，并将其打印到规则集的内容中，因为它是我们需要的选择器。以下是一个示例：

@centre-block : {margin: 0 auto;}; /* a detached ruleset */ 

@breakpoints: xs 479px, sm 767px, md 991px, lg 1200px; 

.make-classes(centre-block, @breakpoints, @centre-block); /* pass the extra param */ 

.make-classes(@prefix, @list, @ruleset) { /* add the extra param */ 
    .iter(length(@list)); 

    .iter(@i) when (@i > 0) { 
     .iter(@i - 1); 

     @pair: extract(@list, @i); 
     @key: extract(@pair, 1); 
     @value: extract(@pair, 2); 

     @media (max-width: @value) { 
      .@{prefix}-@{key} { 
       @ruleset(); /* invoke the ruleset */ 
      } 
     } 

    } 
}