すべての4つのマージン（上、右、bottom.left）

Question

どのように私は、自動的にすべてのこれらのクラスを生成少ないミックスインとしてこのCSSを書くことができますにはあまりミックスイン：

.class1x{margin-top:1px;} 
    .class2x{margin-right:1px;} 
    .class3x{margin-bottom:1px;} 
    .class4x{margin-left:1px;} 
=========================================== 
    .class1y{margin-top:2x;} 
    .class2y{margin-right:2px;} 
    .class3y{margin-bottom:2px;} 
    .class4ymargin-left:2px;}  
=========================================== 
    .class1n{margin-top:n..px;} 
    .class2n{margin-right:n..px;} 
    .class3n{margin-bottom:n..px;} 
    .class4nmargin-left:n..px;} 

そして、そのクラスと値をインクリメントします、たとえば、値が100pxになるまで 私はこのあまりを持っているが、私はすべてのCSSプロパティのために乗算したくない：

@iterations: 30; 
.loopingClass (@index) when (@index > 0) { 
    .classx@{index} { /*classx the class to add in html*/ 
    margin: ~"@{index}px"; 
    } 
    .loopingClass(@index - 1); 
} 
.loopingClass (0) {} 
.loopingClass (@iterations); 

TY。あなたがXを持っている（一意の）番号を許可する場合

Answer 1

、yは、... nは、試してみてください。ただ優しく、given by @Bass Jobsenとして

......... 
.class3-4 { 
    margin-left: 2px; 
} 
.class3-3 { 
    margin-bottom: 2px; 
} 
.class3-2 { 
    margin-right: 2px; 
} 
.class3-1 { 
    margin-top: 2px; 
} 
.class4-4 { 
    margin-left: 1px; 
} 
.class4-3 { 
    margin-bottom: 1px; 
} 
.class4-2 { 
    margin-right: 1px; 
} 
.class4-1 { 
    margin-top: 1px; 
} 

Answer 2

同じ溶液：その結果

@iterations: 5; 
@step:1; 
@number: 4; 

.margintype(@number,@step) when (@number = 4) 
{ 
    margin-left: ~"@{step}px"; 
} 
.margintype(@number,@step) when (@number = 3) 
{ 
    margin-bottom: ~"@{step}px"; 
} 
.margintype(@number,@step) when (@number = 2) 
{ 
    margin-right: ~"@{step}px"; 
} 
.margintype(@number,@step) when (@number = 1) 
{ 
    margin-top: ~"@{step}px"; 
} 


.writeclass(@number,@step,@loopcounter) when (@number>0) 
{ 
.class@{loopcounter}-@{number}{ 

     .margintype(@number,@step); 
    } 
    .writeclass(@number - 1,@step,@loopcounter); 
} 

.loopingClass (@index,@step,@loopcounter) when (@index > 0) { 

.writeclass(@number, @index * @step,@loopcounter); 
.loopingClass(@index - 1,@step,@loopcounter + 1); 
} 
.loopingClass (@iterations,@step,0); 

最適化されています（それほど冗長である必要はありません）。

// usage: 

.class { 
    .make-margins(3); 
    // or: 
    // .make-margins(10, px); 
    // .make-margins(50, rem); 
    // etc. 
} 

// implementation: 

.make-margins(@i, @u: px) when (@i > 0) { 
    .make-margins((@i - 1), @u); 
    &@{i} {.margin-x(unit(@i, @u))} 
} 

.margin-x(@value) { 
    &-1 {margin-top: @value} 
    &-2 {margin-right: @value} 
    &-3 {margin-bottom: @value} 
    &-4 {margin-left: @value} 
} 

Answer 3

@ 7フェーズ - ".class" + "sequence" + "position"を使用してください。 たとえば、あなた少ないコンパイル：

.class1-1 { 
    margin-top: 1px; 
} 
.class1-2 { 
    margin-right: 1px; 
} 
.class1-3 { 
    margin-bottom: 1px; 
} 
.class1-4 { 
    margin-left: 1px; 
} 
.class2-1 { 
    margin-top: 2px; 
} 
.class2-2 { 
    margin-right: 2px; 
} 
.class2-3 { 
    margin-bottom: 2px; 
} 
.class2-4 { 
    margin-left: 2px; 
} 
.class3-1 { 
    margin-top: 3px; 
} 
.class3-2 { 
    margin-right: 3px; 
} 
.class3-3 { 
    margin-bottom: 3px; 
} 

.class3-4 { 
    margin-left: 3px; 
} 

そして.make-margins(3);値が実際にiterationsです。