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.
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.
Navigatie
- Cursus informatie
- Wat meer van less of les in sass
- Css genereren
- Voorbeeld in less
- Voorbeeld in sass
- Een paar vragen
- We gaan verder in sass
- Installatie
- Sass testen
- Hooggeëerd publiek...
- Sass code schrijven
- Een start maken
- Code organiseren
- Opdracht code schrijven
- Een stijlesheet in sass
- De watch flag
- Styles nesten
- Mixins
- Ide configureren
- Een paar vragen
- Eindopdracht
- Feedback