MijnMarketing.com > Blogs > Web > Zelf aan de slag met SCSS

29 jul Zelf aan de slag met SCSS

Deze 6 tips maken het leven van een frontend developer nét iets makkelijker

De afgelopen jaren is het werkveld van de frontend developer enorm veranderd. Ga je mee met alle trends of wacht je liever even af? Heb je Angular al aangeleerd? Dan ben je te laat, want React is de nieuwe way-to-go. Gelukkig is SCSS (de SASS variant) wel blijven hangen. Dit maakt je leven als frontend developer namelijk een stuk aangenamer.

In SCSS gebruiken we variabelen en kleine functies. Deze functies noemen we ‘mixins’ en die worden door je SCSS generator (bijvoorbeeld Koala) geconverteerd naar (minimized) CSS. Veel plezier met deze 6 tips over SCSS die jou gelukkig maken en je styling overzichtelijk houden. Experimenteer ermee, pas ze aan en reageer op de blog. Wij zijn heel benieuwd naar jouw ideeën!

Tip #1 – Nesten!

Je hoeft in SCSS niet meer eindeloos elke css-selector te herhalen. Je kan alles namelijk ‘nesten’. Bij langere CSS-selectors gaat je dit veel typewerk besparen. Daarnaast is het ook nog eens lekker overzichtelijk!

/* Voorbeeld CSS */
.container {
    margin: 0 auto;
    width: 500px;
}

.container h1 {font-size: 2.2rem;}
.container p {font-size: 1.1rem;}

/* Voorbeeld SCSS */
.container {
    margin: 0 auto;
    width: 500px;

    h1 {font-size: 2.2rem;}
    p {font-size: 1.1rem;}
}

Tip #2 – Declare je kleuren in variabelen

Vindt de klant zijn huisstijlkleur net iets te donker of te licht? Is het blauw net iets te ‘blauw blauw’? Als je je kleuren in variabelen zet, hoef je het maar op één plek aan te passen. Je SCSS generator genereert in één klap een nieuw CSS bestand. Je hoeft ook nooit meer de kleuren van de social media buttons te colorpicken.

Let ook op de bonus-tip bij de :hover styling.

/* Colors */
$primary: rgb(255, 255, 255);
$secondary: rgb(0, 0, 0);

$black: rgb(0, 0, 0);
$white: rgb(255, 255, 255);
$red: rgb(255, 0, 0);

$twitterBlue: rgb(0, 159, 227);
$facebookBlue: rgb(78, 105, 162);
$linkedinBlue: rgb(0, 140, 201);

/* Voorbeeld */
a.button-twitter {
    background-color: $twitterBlue;

    &:hover {
        background-color: lighten($twitterBlue, 10%);
    }
}

Tip #3 – Declare je fonts in variabelen

Om precies dezelfde redenen kun je ook je fonts in variabelen zetten. Meestal worden er een beperkt aantal fonts gebruikt. Één voor standaard teksten en één voor de titels en eventuele stijlelementen. Je hoeft vanaf nu dus geen search-en-replace op alle files meer te doen (en de helft vergeten). Een font is snel aangepast zonder dat je alle files door hoeft te spitten.

/* Fonts */
$fontStandard: 'Open Sans', sans-serif;
$fontTitles: 'Roboto Slab', serif;

/* Voorbeeld */
h1 {
    font-family: $fontTitles;
}

p {
    font-family: $fontStandard;
}

Tip #4 – Easy prefixes

Ondanks dat er al veel CSS-regels door de bekendere internetbrowsers zijn gestandaardiseerd, is het wel zo netjes om alle declarations te prefixen. Je weet maar nooit achter wat voor een computer de bezoeker je website probeert te bekijken. Gelukkig kan dat prefixen heel gemakkelijk met deze mixin.

/* Mixins */
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

/* Voorbeeld */
input.submit {
    @include border-radius(5px);
}

Tip #5 – Voor eens en voor altijd een element centreren

Je wilt die tekst-overlay mooi in het midden van de foto zetten. Hoe gaat dat ook alweer? Moet ik nu vertical-align of margins gebruiken? Of de boel absolute positioneren? Stop met denken en gebruik onderstaande mixin.

/* Mixins */
@mixin center($width: null, $height: null) {
    position: absolute;
    top: 50%;
    left: 50%;

    @if not $width and not $height {
        transform: translate(-50%, -50%);
    } @else if $width and $height {
        width: $width;
        height: $height;
        margin: -($width / 2) #{0 0} -($height / 2)
    } @else if not $height {
        margin-left: -($width / 2);
        transform: translateY(-50%);
        width: $width;
    } @else {
        margin-top: -($height / 2);
        transform: translateX(-50%);
        height: $height;
    }
}

/* Voorbeeld */
.parent-element {
    width: 100%;
    height: 400px;

    .centered-element {
        @include center();
    }
}

Tip #6 – Werk modulair

Zo’n CSS/SCSS bestand kan erg lang worden. Om te voorkomen dat je de hele dag meters naar boven en naar beneden moet scrollen, raden we je aan om modulair te werken. Je kunt verschillende SCSS bestanden aan elkaar koppelen en Koala (of jouw favoriete SCSS generator) maakt er een compacte css-file van.

Uitleg hierover is niet nodig! We hebben namelijk een werkmapje voor je klaargezet. Compleet met colors, media queries, mixins en meer. Download het hier en laat ons weten wat je ervan vindt! Kom je er toch niet helemaal uit? Neem dan gerust vrijblijvend contact met ons op. Wij helpen je graag!

Download de SCSS werkmap hier