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.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.