Wat meer van less of les in sass?

LESS en SASS zijn CSS-preprocessors. Ze maken het makkelijker om je CSS slim en overzichtelijk te schrijven.

In plaats van steeds dezelfde code te herhalen, kun je met LESS en SASS gebruikmaken van handige tools zoals variabelen voor kleuren, herbruikbare functies, loops voor herhaling, en het splitsen of samenvoegen van bestanden en stijl regels nesten.

Stijl regels nesten

Stel je maakt een webshop en je wilt een product pagina opmaken. Je zou die pagina dan bijvoorbeeld een container div kunnen geven en die het id product_page kunnen geven. Vervolgens kun je stijl regels alleen van toepassing laten zijn op alles wat op de product_page staat door de regels te nesten. Zie het voorbeeld hieronder.

Voorbeeld: nesten van code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
#product_page { width:100%; background-color:green; display:flex; flex-wrap:wrap; .product { margin:5px; img { border:1px solid black; } } /* Uitleg: 1. Selecteer een element met het id 'product_page'. 2. Stel wat stijl properties in voor #product_page. 3. Selecteer alle elementen met de class="'product'" die in id="'product_page'" zitten. 4. Geef de producten een marge. 5. Selecteer alle 'img' tags die in een element met de class 'product' }

Browser support

Browsers snappen LESS of SASS niet direct. Daarom moet je die eerst compileren naar gewone CSS. Pas daarna kan de browser het tonen. Elke keer als je iets verandert in je code, moet je opnieuw compileren.

Benoem ten minste 3 dingen die je wel met LESS of SASS kunt maar niet met gewoon CSS

Je vindt de antwoorden al in de tekst hierboven en je mag ook gebruik maken van ChatGPT als je wilt of Google. Schrijf ze alleen wel even in jouw eigen bewoordingen uit. Het gaat er om dat je jouw brein dingen beter opslaat als je er actief mee bezig bent en er even over nadenkt.

Deze module wijkt op een aantal punten af

  • Vragen en tekst wisselen elkaar af.
  • Vragen zijn adaptief.
  • Je kunt huiswerk deels inleveren via een ingebouwde editor.

Geen zorgen, het wijst zich hoogst waarschijnlijk allemaal vanzelf. Wil je meer weten?

Navigatie

« Less & Sass Css genereren »