Sass: de css-preprocessor

Het afgelopen jaar is de populariteit van css-preprocessors enorm toegenomen. Daarvoor moesten developers er eigenlijk niet zoveel van hebben. “Wat is er mis met gewoon CSS, zoals we het al 17 jaar kennen?”. In dit artikel wil ik wat handige functies van css-preprocessors (en dan specifiek Sass) behandelen die het gebruik van CSS sneller, schoner en makkelijk aanpasbaar maken.

Een css-preprocessor is eigenlijk een applicatie die (meestal) draait op de development machine. Deze leest de bronbestanden in, parsed deze en slaat dan de uiteindelijke CSS bestanden op die op hun beurt direct naar de browser gestuurd kunnen worden. Een css-preprocessor maakt het mogelijk snel ‘schone’ CSS code te schrijven en gebruik te maken van mogelijkheden die normaal gesproken veel tijd in beslag nemen. Ook wijst de preprocessor je op eventuele syntax-fouten die je maakt en kun je de CSS makkelijk minimaliseren. Dit scheelt weer in de laadtijd van de website.

Twee grote css-preprocessors zijn Less en Sass. Er zijn al enorm veel blogartikelen geschreven waarin Less en Sass vergeleken worden maar in het kort komt het er op neer dat Less eenvoudiger is om te installeren en minder tools vereist om te draaien. Sass is een stuk robuster en heeft meer uitbreidingen (extensies). In dit artikel ligt de focus op Sass in combinatie met de extensie Compass. Compass biedt een aantal handige tools en uitbreidingen op Sass en is eigenlijk niet meer weg te denken bij Sass.

Variabelen

$primaryColor : green;
article{
    margin-top:30px;
    h1{
        font-size:3em;
        border-bottom:1px solid $primaryColor;
    }
    a{
        color:$primaryColor;
    }
}

article {
    margin-top: 30px;
}
article h1 {
    font-size: 3em;
    border-bottom:1px solid green;
}
article a {
    color: green;
}

Dit voorbeeld maakt gebruik van een variabele $primaryColor. Deze wordt gebruikt in de border van h1 tag’s en als tekstkleur voor a tag’s. Handig om direct bij de start van een project te gebruiken zodat je later snel en veilig een waarde kunt aanpassen, bijvoorbeeld een kleur maar denk ook aan font-size, grijswaardes en border-radius. Ook een groot voordeel dat je kunt ‘nesten’ in plaats van het bovenliggende element (article) eindeloos te herhalen. Alles wat van toepassing is op het element article volgt binnen de curly-brackets.

Sprite sheets

Erg snel en makkelijk is de mogelijkheid om automatisch sprite sheets te laten genereren in Sass. Een sprite sheet kun je zien als een afbeelding waarin alle grafische elementen netjes onder elkaar staan zodat je niet elke afbeelding apart hoeft te downloaden. Dit scheelt in de laadtijd van de pagina. Met behulp van CSS laat je dan alleen het deel van die afbeelding zien dat je nodig hebt. Compass leest de map met afbeeldingen uit, maakt hier een afbeelding van en maakt ook automatisch de CSS aan om het deel van die afbeelding te laten zien. Zie ook de tutorial over sprite sheets in Compass.

Mixins

Soms heb je een bepaald stukje code dat je vaker gebruikt. In plaats van ze elke keer te copy-pasten kun je een mixin maken. Het is te vergelijken met functies in andere programmeertalen.

@mixin featured-text{
    text-transform:uppercase;
}
ul{
    li{
        @include featured-text();
        font-size:1.2em;
    }
}
article{
    header{
        aside,section.promo{
            @include featured-text();
            font-size:1.5em;
        }
    }
}

ul li {
    text-transform: uppercase;
    font-size:1.2em;
}
article header aside, article header section.promo {
    text-transform: uppercase;
    font-size:1.5em;
}

Dit is al een hele verbetering, maar je ziet dat er ook dubbele code in te vinden is. Daar komt extend van pas.

Extend

Extend plaatst niet opnieuw de code in de CSS maar de selector waar je de extend gebruikt wordt toegevoegd aan de oorspronkelijke selector.

.featured-text{
    text-transform:uppercase;
    font-weight:bold;
    text-decoration:underline;
}
ul{
    li{
        @extend .featured-text;
        font-size:1.2em;
    }
}
article{
    header{
        aside,section.promo{
            @extend .featured-text;
            font-size:1.5em;
        }
    }
}

.featured-text, ul li, article header aside, article header section.promo {
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: underline;
}
ul li {
    font-size: 1.2em;
}
article header aside, article header section.promo {
    font-size: 1.5em;
}

Referencing Parent Selectors

Het ampersand teken & wordt gebruikt om de parent van de huidige selector uit te breiden. Je kunt dan heel simpel dit doen:

a{
    color:blue;
    &:hover{
        color:red;
    }
}

a{
    color: blue;
}
a:hover {
    color: red;
}

Maar je kunt ook de buitenste scope van de selector uitbreiden. Dit is handig bij bijvoorbeeld WordPress om de styling aan te passen als het element op een post-detail pagina voorkomt. Je plaatst dan het ampersand teken achter de selector. Zie het volgende voorbeeld.

a{
    color:blue;
    body.post-detail &{
        color:red;
    }
}

a {
    color: blue;
}
body.post-detail a {
    color: red;
}

Extensies

Naast Compass zijn er veel extensies te verkrijgen voor Sass. Er is een heel aantal frameworks direct te gebruiken in Sass. Bijvoorbeeld Foundation, Bootstrap en tal van grid systemen (Zen Grids en Susy)

Dit is nog maar een heel klein deel van de vele mogelijkheden die Sass biedt. Denk aan loops, partials, if-statements, math-functies, live-source-editing en nog veel meer. Je kunt op SassMeister zelf wat dingen proberen met Sass en Compass.

Eigenlijk snap je niet dat je al die jaren zonder hebt gekund. Ik ben benieuwd naar jouw ervarig met Sass, Less of juist een andere css-preprocessors. Misschien ben je juist wel fanatiek aanhanger van ‘plain’ CSS? Plaats gerust een comment hieronder.