Meno mixin per tutti e 4 i margini (in alto, a destra, bottom.left)

Question

Come posso scrivere questo css come meno intermedia che genera automaticamente tutte le classi:

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

E per incrementare il valore che le classi e, per esempio, fino a quando il valore è 100px. Ho questo meno, ma io non voglio moltiplicare per ogni proprietà 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

Se si consente il numero (unico) dove si ha x, y, ... n, provare:

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

che si traduce in:

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

Stessa soluzione come given by @Bass Jobsen, appena delicatamente ottimizzato (non doveva essere così prolisso):

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

@ sette fasi-max all'utilizzo si effettivamente m utilizzare ".class" + "sequenza" + "posizione". Per esempio il vostro meno di compilazione:

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

E .make-margins(3); valore è in realtà iterations.