SASS directives: Don’t repeat yourself! I repeat…

-

SASS, welke frontend developer is er geen fan van? Sinds mijn eerste ervaring met SASS (Syntactically Awesome Stylesheets) ben ik fan van deze manier van CSS schrijven. Het gebruik van variabelen, mixins en maps zijn zomaar een paar dingen die het leven van een frontender een stuk gemakkelijker en leuker maken. Bovendien helpt SASS je er bij om je CSS goed gestructureerd en DRY (Don’t Repeat Yourself) te houden

Gebruik maken van control directives in SASS is een uitstekende manier om je CSS nog meer DRY te houden. Daar komen zaken als For en Each loops bij kijken. De mogelijkheden daarvan zal ik wat meer verduidelijken met enkele voorbeelden.

Tip: mocht je de voorbeelden zelf willen testen en ze hier en daar aanpassen (voel je vrij), dan kan ik SassMeister aanraden. Hier wordt SCSS code direct gegenereerd naar CSS.

@for

De eerste directive die ik wil bespreken is de @for-loop. Net zoals je gewend bent in bijvoorbeeld javascript kun je loopen tot of tot en met een bepaald getal. Wanneer je 4 kolommen wilt genereren, kun je de volgende code gebruiken:

$columns: 4;

@for $i from 1 through $columns {
    .column-#{$i} {
        /* jouw code hier */
    }
}

Na wat SASS-magic geeft dit de volgende CSS:

.column-1 {
    /* jouw code hier */
}
.column-2 {
    /* jouw code hier */
}
 
.column-3 {
    /* jouw code hier */
}
 
.column-4 {
    /* jouw code hier */
}

Zoals je kunt zien wordt het aantal columns eerst in de variabel $columns gezet en vervolgens wordt er vanaf 1 geteld en gelooped, wat in 4 classes resulteert. Het woordje through kun je vervangen door to. Dit heeft als resultaat dat er 3 column classes worden gegenereerd.

@each

De volgende interessante directive is @each. Deze loop lijkt op de @for, alleen wordt er niet naar een getal gekeken, maar naar een variabel met de verschillende items in de lijst. Een goede toepassing van de @each directive is voor bijvoorbeeld social media iconen. Qua CSS zijn ze bijna allemaal hetzelfde op 1 ding na: het icoon zelf:

$icons: facebook twitter instagram;

@each $icon in $icons {
    .icon-#{$icon} {
        background-image: url(/images/icons/#{$icon}.png);
    }
}

In normale CSS is dit het resultaat:

.icon-facebook {
    background-image: url(/images/icons/facebook.png);
}
 
.icon-twitter {
    background-image: url(/images/icons/twitter.png);
}
 
.icon-instagram {
    background-image: url(/images/icons/instagram.png);
}

6 Regeltjes SASS is genoeg! Moet er een nieuw icoon worden toegevoegd? Even de naam toevoegen aan de $icons variabel en klaar! Zo simpel kan het zijn.

@each (deel 2)

Maar… er is meer. Wat dacht je van enkele standaard meldingen met ieder hun eigen icoon afbeelding en achtergrondkleur? Geen probleem! Hiervoor is het gebruik van een SASS Map aan te raden. Klinkt duur, maar het is eigenlijk niets meer dan een key : value lijstje.

Een SASS Map voor de standaard meldingen bevat een classnaam en basis kleur en kan er zo uit zien:

$notices: (
    error: #ffecec,
    success: #e9ffd9
);

Nu de SASS Map staat, is het tijd om hem in actie te zien, hier komt opnieuw @each goed van pas:

@each $name, $color in $notices {
    .notice--#{$name} {
        background-color: $color;
        
        .icon {
            background-image: url(‘../img/icons/#{$name}.png’);
            padding: 0 10px;
        }
    }
}

Dit resulteert in:

.notice--error {
    background-color: #ffecec;
}
.notice--error .icon {
    background-image: url("../img/icons/error.png");
    padding: 0 10px;
}
.notice--success {
    background-color: #e9ffd9;
}
.notice--success .icon {
    background-image: url("../img/icons/success.png");
    padding: 0 10px;
}

En wanneer er een nieuw type melding bijkomt, bijvoorbeeld een waarschuwing is het een kwestie van de $notices variabel aanpassen en klaar:

$notices: (
    error: #ffecec,
    success: #e9ffd9,
    warning: #f2c779; 
);

@Each (deel 3): what the nth()?

Best handig toch? Maar dat is nog niet alles! De SASS Map voor de meldingen kan nog verder uitgebreid worden. Niet alleen met een nieuw type melding, maar bijvoorbeeld ook een kleur border per melding. De uitgebreide SASS Map ziet er dan als volgt uit:

$notices: (
    error: (#ffecec, #f5aca6),
    success: (#e9ffd9,#a6ca8a),
    warning: (#f2c779,#f2c779); 
); 
@each $name, $color in $notices {
    .notice--#{$name} {
        background-color: nth($color, 1);
        border: 1px solid nth($color, 2);
        
        .icon {
            background-image: url(‘../img/icons/#{$name}.png’);
            padding: 0 10px;
        }
    }
}

Zoals je kunt zien, kun je via nth kun je de ingevoerde waardes gebruiken: nth(<variabel>,<positie>). De error melding ziet er nu als volgt uit:

.notice--error {
    background-color: #ffecec;
    border: 1px solid #f5aca6;
}
.notice--error .icon {
    background-image: url(../img/icons/error.png);
    padding: 0 10px;
}

Uiteraard is er nog veel meer te doen met de control directives. Dingen als @if en @while kunnen ook goed van pas komen. Om over alle mogelijkheden te lezen verwijs ik je graag door naar de officiële SASS documentatie.

Ik hoop je iets meer op weg te hebben geholpen en te hebben bijgedragen aan meer DRY SASS/CSS code in deze wereld 🙂 Vragen? Vragen!