Styles nesten

Hieronder staat wat voorbeeld html-code van een breadcrumbs navigatie. Je kunt deze navigatie met css natuurlijk op allerlei manieren opmaken: nav.crumbs ol li.crumb a {text-decoration:underline;} zou een manier kunnen zijn om bij de linkjes te komen bijvoorbeeld.

voorbeeld.html
1 2 3 4 5 6 7 8 9 10 11
<header>  <nav class="crumbs">    <ol>      <li class="crumb"><a href="#">Bikes</a></li>      <li class="crumb"><a href="#">BMX</a></li>      <li class="crumb">Jump Bike 3000</li>    </ol>  </nav> </header>

Met SASS kun je CSS code nesten, dat is (hopelijk) veel intuïtiever. Zie hieronder een compleet voorbeeld met daarin verschillende concepten die we tot nog toe hebben behandeld.

voorbeeld.scss, code nesten + importeren + variabelen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
// Kopieer de inhoud van variables.scss en plaats hier. @import 'variables'; // Zoek naar alle <header> tags, alles wat binnen { en } valt moet in die header tag zitten. header {     // Stel wat eigenschappen van de <header> tag in.     // Maak gebruik van variabelen uit variables.scss.   background-color: $background-color;   width: 100%;   padding: $row-gap;      // Selecteer alle "nav" elementen die de class "crumbs" hebben die in een <header> tag zitten    nav.crumbs {          // Selecteer alle <li> (list item) elementen met de class "crumb"          // die in <nav> een nav element de class "crumbs" zitten          // die in een <header> tag zitten.....     li.crumb {        color:gray;              // Hopelijk is het concept van nesting al duidelijk hier.       a {         color:black;         text-decoration:none;       }     }  } }

Uitleg

Het nesten zit hem er in dat je styles in styles kunt definiëren met gewoon CSS had je bijvoorbeeld iets als: header nav.crumbs li.crumb a{ /* hier wat styles */ } kunnen schrijven en dan was je tot hetzelfde gekomen. Dit had je dan, in verschillende vormen, meerdere keren moeten herhalen om alle styles vast te kunnen leggen.

Nesten maakt regels specifiek

Zoals je in het voorbeeld hierboven ziet worden CSS regels door te nesten heel specifiek. Dit heeft als voordeel dat het voor de browser makkelijker wordt om regels toe te passen, wat de performance / laadtijd verbeterd. Het heeft ook een nadeel, namelijk dat het lastiger wordt om regels te overschrijven, iets wat vaak gebeurd bij het schrijven van CSS-code. Als vuist regel kun je aanhouden dat 3 tot 4 niveau's diep nesten wel genoeg is. Meer is meestal overkill en maakt je code slechter leesbaar.

Navigatie

« De watch flag Mixins »