Sass (scss) Beispielcode

Divklassen mit generierten Zahlenwerten

Wenn man Divklassen abdecken will die sich nur durch eine Zahl unterscheiden (z.B. .leading-# bei einem Joomla Blog oder .col-md-# bei Bootstrapklassen), kann man dies einfach in Sass programmieren.
In diesem Beispiel werden alle Klassen von leading-1 bis leading-12 einbezogen (wichtig: leading-0 wird bei diesem Beispiel nicht berücksichtigt.

//scss code

$number: 12;

%leading-styles{
    .divbox{
        margin-top: 50px;
    }
}

@mixin blogLeadings{
    @for $i from 1 through $number{
        .leading-#{$i}{
            @extend %leading-styles;
        }
    }
}

Schreibe einen Kommentar

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