[Tut] Sass

ICTscripters maakt gebruik van cookies. Door het gebruiken en browsen naar onze site gaat je automatisch akkoord met het gebruik van cookies. Klik hier voor meer informatie

  • Ik werk na al bijna een jaar met Sass en het lijkt met leuk om mijn kennis te delen en hier een Tutorial over te schrijven. In deze tutorial wil ik de grond beginselen van Sass bespreken, zoals het installeren van Sass.

    Wat is Sass?
    Sass wil bereiken dat er minder CSS geschreven hoeft te worden, CSS leesbaarder word en CSS onderhoudbaarder te krijgen. Sass schrijft een .sass of .scss file om naar leesbare CSS voor browsers.

    Waarom Sass?
    • Sneller en daardoor ook lekker werken.
    • Variabelen gebruiken.
    • Je code nesten.
    • Programmeren: functies schrijven.
    • Loopen.
    • If, else statements.
    • Herbruikbare stukken code schrijven.
    • Files includen/importen.


    Kortom voor iedere Front-Ender is Sass vrijwel een must have! Sass word al helemaal handig als je het gebruikt met Compass. Compass is een librarie van functie's die het heel handig maken om voor alle verschillende browser code te schrijven.

    We komen in het volgende hoofdstuk terug op Compass. Omdat ik dit hoofdstuk meer wil besteden aan het installeren van Sass, maar hier is toch een voorbeeld van Compass om het nut ervan in te zien:

    Je wilt je div'je een border-radius van 5px geven en je zet in je css:

    Source Code

    1. .mijnDiv {
    2. border-radius: 5px;
    3. }


    Nu kan ik je verzekeren dat deze border-radius niet in alle browser getoond zal worden. Als je dit met Compass doet wordt de border-radius automatisch naar een code geconvert die door alle browsers word ondersteund.

    Sass code met een Compass functie (border-radius):

    Source Code

    1. .mijnDiv {
    2. @include border-radius(5px);
    3. }


    Word omgezet naar CSS:

    Source Code

    1. .mijnDiv{
    2. -webkit-border-radius: 5px;
    3. -moz-border-radius: 5px;
    4. -ms-border-radius: 5px;
    5. -o-border-radius: 5px;
    6. border-radius: 5px;
    7. }


    Je ziet dat dit heel veel code bespaard! En zo heeft Compass nog tal van andere functie's.

    Hoe installeer ik Sass?
    Sass kan op verschillende besturingen systemen worden geïnstalleerd, denk aan: OS X, Windows en Linux. Ik ga het in deze tutorial hebben over Windows, omdat de meesten mensen dit besturing systeem zullen gebruiken. Onderaan deze tutorial staan linkjes met hoe je Sass kan installeren op OS X en Linux.

    Voordat we Sass kunnen installeren moeten we eerst Ruby installeren. Gelukkig is daar een handige one-click Windows installer voor. Ik gebruik versie 1.9.3. Ga de installer normaal door. Zorg dat je bij "Installation Destination and Optional Taks" de onderste twee opties hebt aangevinkt.



    Als je klaar bent met de installer kan je je Terminal openen (opdrachtpomp/cmd). In de Terminal typ je:

    Source Code

    1. gem install sass




    En klaas is Kees. Sass is nu als het goed is met succes op je computer geïnstalleerd. Wil je zeker weten dat Sass geïnstalleerd is typ je in de Terminal:

    Source Code

    1. sass -v

    Als sass met succes is geïnstalleerd komt daar je Sass versie nummer te staan. Bij mij is dat Sass 3.3.4 (Maptastic Maple).

    Nu kunnen we beginnen met het schrijven van .sass of .scss files. Mijn voorkeur is .scss files, omdat ik scss er mooier en overzichtelijker vind uit zien dan .sass files. Er zit verschil hoe je Sass schrijft, maar hier komen we het volgende hoofdstuk op terug.

    We moeten via de Terminal de map opgeven waar onze Sass bestanden staan. Een voorbeeld: Stel onze .scss files staan in C:/xamp/htdocs/sass dan zeggen we tegen Sass dat hij deze bestanden in de gaten moet houden door middel van het commando:

    Source Code

    1. sass --watch C:/xamp/htdocs/sass


    Nu houd Sass alle .sass en .scss bestanden in de gaten totdat ze opgeslagen worden en zal hij de bestanden omzetten in CSS, maar wel in de zelfde map. Wil je bijvoorbeeld dat hij het in een andere map opslaat, bijvoorbeeld de map css, dan doe je dit door dit commando uit te voeren:

    Source Code

    1. sass --watch C:/xamp/htdocs/sass:C:/xamp/htdocs/css


    Nu kunnen we beginnen met onze Sass code te schrijven. Hier komen we in het volgende hoofdstuk op terug.

    Ik hoop dat je iets aan deze Tutorial hebt gehad en het nut van Sass begint in te zien! Vragen of opmerkingen kunnen hier onder of d.m.v. een PM gestuurd worden. Graag zie ik je terug in de volgende Tutorial waar we meer over het schrijven van Sass code gaan leren!

    Sass: sass-lang.com/
    Compass: compass-style.org/
    Installeer Sass OS X/Linux: YouTube Video
    Met vriendelijke groet,

    Dees Oomens

    1,296x gelezen

Reacties 4

  • dees040 -

    Die mixin word dus aangemaakt door Compass, dat is het handige/hele verhaal achter Compass. Deze maakt alle functie's kant en klaar en zorgt dat het precies goed komt te staan voor elke browser.

  • Cas -

    Helaas niet helemaal correct, in je code gebruik je een functie (mixin) die eerst gedefinieerd moet worden.

    Dit doe je op de volgende manier:
    [code]
    @mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
    }
    [/code]

  • WebMobiel -

    Echt heel handig, dat wil zeggen voor de gene die overweg kunnen met CSS ze niet meer zoveel hoeven te knutselen voor elke browser!

    Cross Browser

    Thanks Dees!!!

  • K.Rens -

    Bedankt, ik had hier nog nooit van gehoord.
    Is inderdaad handig dat het je css omzet naar een css die door meerdere browsers correct wordt getoond. :)

    Super!