LESSループモジュラー規模を作成する

Question

私は以下の出発の変数を使用して、サイジングテキストにモジュラーアプローチを実現しようとしています：

フォントサイズ：@ 1.7remを。 @ line-height：1.414;

私はこの結果を作成しますが、かなり完全にLESSまだ把握していないミックスインを書きたいと思います：

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では、ループは再帰的なミックスインです。このミックスインは、いくつかのパラメータを取り、条件が正しくなるまでそれ自身を呼び出します。この例では、@_i > 0の間に動作します。自らを呼び出すたびに@_iの値が減少します。

mixin（またはループ）の内部では、extract(@array, @index)コマンドを呼び出すことによって配列から現​​在の要素を取得します。次に、セレクタにフォントサイズを設定します。 mixinの呼び出し時には、font-sizeの値が@_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; 
}