Voorbeeld in sass
Hieronder zie je hetzelfde voorbeeld alleen nu in SASS. De bestandsextensie van sass is .scss Het lijkt best veel op elkaar zoals je ziet, het grootste gedeelte is gewone CSS-code, alleen voor het loopen gebruiken we speciale code.
voorbeeld.scss
1
2
3
4
5
6
7
8
9
each(range(10), {
.w-(@{value} * 10) {
height: (@value * 10%);
float:left;
padding:15px;
background-color:#e9eaeb;
}
});
// De code hierboven is geschreven in less, je hoeft dit voor nu nog niet helemaal te begrijpen.
Met de 7 regels code die we hierboven schreven in less bereiken we hetzelfde als met 60 regels code in CSS hieronder. Uiteraard is dit nog maar een heel eenvoudig voorbeeld, LESS en SASS kunnen veel meer dan alleen loopjes maken.
output.css
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
.w-10 {
height: 10%;
float:left;
padding:15px;
background-color:#e9eaeb;
}
.w-20 {
height: 20%;
float:left;
padding:15px;
background-color:#e9eaeb;
}
.w-30 {
height: 30%;
float:left;
padding:15px;
background-color:#e9eaeb;
}
.w-40 {
height: 40%;
float:left;
padding:15px;
background-color:#e9eaeb;
}
.w-50 {
height: 50%;
float:left;
padding:15px;
background-color:#e9eaeb;
}
.w-60 {
height: 60%;
float:left;
padding:15px;
background-color:#e9eaeb;
}
.w-70 {
height: 70%;
float:left;
padding:15px;
background-color:#e9eaeb;
}
.w-80 {
height: 80%;
float:left;
padding:15px;
background-color:#e9eaeb;
}
.w-90 {
height: 90%;
float:left;
padding:15px;
background-color:#e9eaeb;
}
.w-100 {
height: 100%;
float:left;
padding:15px;
background-color:#e9eaeb;
}
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