LESS循環創建模塊化比例尺

Question

我正在嘗試使用以下啓動變量實現文本大小的模塊化方法：

@ font-size：1.7rem; @ line-height：1.414;

我想編寫這樣就會產生這樣的結果，但還沒有完全充分掌握LESS又一個mixin：

h4 { 
    font-size: @font-size * @line-height; 
} 
h3 { 
    font-size: (@font-size * @line-height) * @line-height; 
} 
h2 { 
    font-size: ((@font-size * @line-height) * @line-height) * @line-height; 
} 
h1 { 
    font-size: (((@font-size * @line-height) * @line-height) * @line-height) * @line-height; 
} 

Answer 1

你必須與你選擇的陣列 - @elements。

然後你得到的長度爲@elements - 它將被用作數組的迭代器。 然後循環開始。它的名字是set-font-size。在Less循環是遞歸混合。該mixin需要一些參數並自行調用，直到某些條件是正確的。在此示例中，它適用於@_i > 0。每次它自己調用時，@_i的值都會降低。

在mixin（或循環）中，通過調用extract(@array, @index)命令可以從數組中獲取當前元素。然後，將字體大小設置爲您的選擇器。 evry時間混入自己，字體大小的值增加@_font-size * @_line-height。

這就是全部:)
Codepen DEMO。

減：

@elements: h1, h2, h3, h4; 

@iterations: length(@elements); // lehgth of @elements 

@font-size: 1.7rem; 
@line-height: 1.414; 

.set-font-size(@_i, @_elements, @_font-size, @_line-height) when (@_i > 0) { 
    @selector: extract(@_elements, @_i); 

    @{selector} { 
    font-size: @_font-size; 
    } 

    .set-font-size(@_i - 1, @_elements, @_font-size * @_line-height, @_line-height); 
} 

.set-font-size(@iterations, @elements, @font-size, @line-height); 

的CSS輸出：

h4 { 
    font-size: 1.7rem; 
} 
h3 { 
    font-size: 2.4038rem; 
} 
h2 { 
    font-size: 3.3989732rem; 
} 
h1 { 
    font-size: 4.8061481rem; 
}