HTML
<div class="fizzbuzz__item">
1
</div><div class="fizzbuzz__item">
2
</div><div class="fizzbuzz__item">
3
</div><div class="fizzbuzz__item">
4
</div><div class="fizzbuzz__item">
5
</div><div class="fizzbuzz__item">
6
</div><div class="fizzbuzz__item">
7
</div><div class="fizzbuzz__item">
8
</div><div class="fizzbuzz__item">
9
</div><div class="fizzbuzz__item">
10
</div><div class="fizzbuzz__item">
11
</div><div class="fizzbuzz__item">
12
</div><div class="fizzbuzz__item">
13
</div><div class="fizzbuzz__item">
14
</div><div class="fizzbuzz__item">
15
</div><div class="fizzbuzz__item">
16
</div><div class="fizzbuzz__item">
17
</div><div class="fizzbuzz__item">
18
</div><div class="fizzbuzz__item">
19
</div><div class="fizzbuzz__item">
20
</div><div class="fizzbuzz__item">
21
</div><div class="fizzbuzz__item">
22
</div><div class="fizzbuzz__item">
23
</div><div class="fizzbuzz__item">
24
</div><div class="fizzbuzz__item">
25
</div><div class="fizzbuzz__item">
26
</div><div class="fizzbuzz__item">
27
</div><div class="fizzbuzz__item">
28
</div><div class="fizzbuzz__item">
29
</div><div class="fizzbuzz__item">
30
</div><div class="fizzbuzz__item">
31
</div><div class="fizzbuzz__item">
32
</div><div class="fizzbuzz__item">
33
</div><div class="fizzbuzz__item">
34
</div><div class="fizzbuzz__item">
35
</div><div class="fizzbuzz__item">
36
</div><div class="fizzbuzz__item">
37
</div><div class="fizzbuzz__item">
38
</div><div class="fizzbuzz__item">
39
</div><div class="fizzbuzz__item">
40
</div><div class="fizzbuzz__item">
41
</div><div class="fizzbuzz__item">
42
</div><div class="fizzbuzz__item">
43
</div><div class="fizzbuzz__item">
44
</div><div class="fizzbuzz__item">
45
</div><div class="fizzbuzz__item">
46
</div><div class="fizzbuzz__item">
47
</div><div class="fizzbuzz__item">
48
</div><div class="fizzbuzz__item">
49
</div><div class="fizzbuzz__item">
50
</div><div class="fizzbuzz__item">
51
</div><div class="fizzbuzz__item">
52
</div><div class="fizzbuzz__item">
53
</div><div class="fizzbuzz__item">
54
</div><div class="fizzbuzz__item">
55
</div><div class="fizzbuzz__item">
56
</div><div class="fizzbuzz__item">
57
</div><div class="fizzbuzz__item">
58
</div><div class="fizzbuzz__item">
59
</div><div class="fizzbuzz__item">
60
</div><div class="fizzbuzz__item">
61
</div><div class="fizzbuzz__item">
62
</div><div class="fizzbuzz__item">
63
</div><div class="fizzbuzz__item">
64
</div><div class="fizzbuzz__item">
65
</div><div class="fizzbuzz__item">
66
</div><div class="fizzbuzz__item">
67
</div><div class="fizzbuzz__item">
68
</div><div class="fizzbuzz__item">
69
</div><div class="fizzbuzz__item">
70
</div><div class="fizzbuzz__item">
71
</div><div class="fizzbuzz__item">
72
</div><div class="fizzbuzz__item">
73
</div><div class="fizzbuzz__item">
74
</div><div class="fizzbuzz__item">
75
</div><div class="fizzbuzz__item">
76
</div><div class="fizzbuzz__item">
77
</div><div class="fizzbuzz__item">
78
</div><div class="fizzbuzz__item">
79
</div><div class="fizzbuzz__item">
80
</div><div class="fizzbuzz__item">
81
</div><div class="fizzbuzz__item">
82
</div><div class="fizzbuzz__item">
83
</div><div class="fizzbuzz__item">
84
</div><div class="fizzbuzz__item">
85
</div><div class="fizzbuzz__item">
86
</div><div class="fizzbuzz__item">
87
</div><div class="fizzbuzz__item">
88
</div><div class="fizzbuzz__item">
89
</div><div class="fizzbuzz__item">
90
</div><div class="fizzbuzz__item">
91
</div><div class="fizzbuzz__item">
92
</div><div class="fizzbuzz__item">
93
</div><div class="fizzbuzz__item">
94
</div><div class="fizzbuzz__item">
95
</div><div class="fizzbuzz__item">
96
</div><div class="fizzbuzz__item">
97
</div><div class="fizzbuzz__item">
98
</div><div class="fizzbuzz__item">
99
</div><div class="fizzbuzz__item">
100
</div>
SCSS
$fizz_color: #FFC8C8;
$buzz_color: #FF9999;
$fizzbuzz_color: #444F5A;
body {
font-family: Verdana, sans-serif;
}
@mixin afterElement($color) {
& {
font-size: 20px;
color: $color;
}
}
.fizzbuzz__item {
margin: 0;
padding: 10px;
border-bottom: 1px solid #3E4149;
color: transparent;
&:nth-of-type(3n) {
background-color: $fizz_color;
color: $fizz_color;
font-size: 0;
&:after {
content: "Fizz";
@include afterElement(#3E4149);
}
}
&:nth-of-type(5n) {
background-color: $buzz_color;
color: $buzz_color;
font-size: 0;
&:after {
content: "Buzz";
@include afterElement(#3E4149);
}
}
&:nth-of-type(15n) {
background-color: $fizzbuzz_color;
color: $fizzbuzz_color;
font-size: 0;
&:after {
content: "Fizz Buzz";
@include afterElement(#fff);
}
}
}
