Mixins
Mixins in SASS zijn als een soort gereedschapskistje dat je kunt hergebruiken om stukjes CSS-code op meerdere plekken in je project te gebruiken, zonder dat je alles steeds opnieuw hoeft te schrijven. Denk aan een soort sjabloon.
Stel je voor dat je op verschillende plekken in je website knoppen wilt maken die allemaal dezelfde stijl hebben, bijvoorbeeld dezelfde kleur, schaduw of opmaak. In plaats van al die eigenschappen steeds opnieuw te typen, kun je een mixin maken die deze opmaak bevat. Daarna roep je de mixin aan op alle plekken waar je die stijl wilt toepassen.
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
28
29
30
31
@mixin button-styles {
color: white;
padding: 10px 20px;
border-radius: 5px;
text-transform: uppercase;
}
// Color Variables
$primary-color: #007bff;
$secondary-color: #6c757d;
$success-color: #28a745;
$danger-color: #dc3545;
button.primary {
@include button-styles;
background-color:$primary-color;
}
button.secondary {
@include button-styles;
background-color:$secondary-color;
}
button.secondary {
@include button-styles;
background-color:$success-color;
}
button.danger {
@include button-styles;
background-color:$danger-color;
}
Wat vragen
Begrijp je nu wat mixins zijn? Test je kennis door de onderstaande vragen te beantwoorden. Mocht je het nog niet helemaal begrijpen, neem dan ook de documentatie van sass zelf nog even door: @mixin
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