SASS: MIXIN für eingestellte Höhen

Question

Zum ersten Mal hier fragen.

Ich versuche, etwas von MIXIN zu machen, um Höhen für ein Element zu setzen.

Zum Beispiel < span class="space h5" ></span> in CSS dies sei:

$size: 1px; 

.space { 

display: block; 

} 

.space.x5 { 

height: $size * 5; 

} 

Also meine Frage, ist es möglich, eine mixin zu schaffen zu multiplizieren, addieren oder Mengen mit Klassen subtrahieren?

Zum Beispiel

< span class=" space h5 x2 add4 "></span> ====> height: 14px 

oder:

< span class=" space h5 x4 subtract2 "></span> ====> height: 18px 

Vielen Dank!

Grüße.

Answer 1

@mixin height-special($default,$multiplier: 1,$extra: 0) { 
    height: ($default*$multiplier+$extra) + px; 
} 

So, höhenSonder (5,2,4) wird wieder 14 Sie die letzten 2 auslassen kann, die den Standardwert zurück.

Answer 2

Es ist eine schöne Lösung, aber ich war auf der Suche nach etwas mehr wie eine Schleife:

.space { 
    display: block; 
    clear: both; 
} 

$space-base: 5px; 

/*multipliers*/ 
@for $space-base from 1 through 100 { 
    .h5x#{$space-base} { 
    height: $space-base * 5px; 
    } 
} 

/*add*/ 
.h5x2.add-1 { 
    height: ($space-base * 2 + 1); 
} 
.h5x2.add-2 { 
    height: ($space-base * 2 + 2); 
} 
.h5x2.add-3 { 
    height: ($space-base * 2 + 3); 
} 
.h5x2.add-4 { 
    height: ($space-base * 2 + 4); 
} 
.h5x2.add-5 { 
    height: ($space-base * 2 + 5); 
} 
.h5x2.add-6 { 
    height: ($space-base * 2 + 6); 
} 
.h5x2.add-7 { 
    height: ($space-base * 2 + 7); 
} 
.h5x2.add-8 { 
    height: ($space-base * 2 + 8); 
} 
.h5x2.add-9 { 
    height: ($space-base * 2 + 9); 
} 
/*subtract*/ 
.h5x2.sub-1 { 
    height: ($space-base * 2 - 1); 
} 

ich die ganze Kombination mit der Hand zu vermeiden versuchte, und tun es mit SASS.