減混入（上，右，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。

Answer 1

如果允許，你有X（唯一）號，Y，...，N，嘗試：

@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); 

，這導致：

......... 
.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

相同的溶液given by @Bass Jobsen，只需輕輕優化（它不一定非常詳細）：

// 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

@使用時的七個階段最大值實際上是m ust使用「.class」+「序列」+「位置」。 例如你少編譯：

.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。