SASS | Mixing | Margin&Padding

Ich habe es schon so oft benötigt, dass ich Margins bzw. Paddings für einzelne Elemente selbst definieren möchte. Wenn man SaSS einsetzt kann man dazu bspw. folgendes Mixing standardmäßig verwenden:

$currentOffset: 0;
$maxOffset: 20;

@while $currentOffset <= $maxOffset {
    .m-top-#{$currentOffset} {
        margin-top: $currentOffset*0.25 + 'em;'
    }
    .m-bot-#{$currentOffset} {
        margin-bottom: $currentOffset*0.25 + 'em;'
    }
    .p-top-#{$currentOffset} {
        padding-top: $currentOffset*0.25 + 'em;'
    }
    .p-bot-#{$currentOffset} {
        padding-bottom: $currentOffset*0.25 + 'em;'
    }
    $currentOffset: $currentOffset + 0.25; 
}

So kann man dann jedem Element bspw. die Klasse m-top-1 (margin-top: 0.25em), etc. oder m-top-20 (margin-top: 5em) bzw. p-top-1 (padding-top: 0.25em), etc. oder p-top-20 (padding-top: 5em) geben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert