是否可以從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 */ 
      } 
     } 

    } 
}