EN
SCSS - nesting classes
0 points
In this article, we would like to show you how to use nesting in SCSS.
Quick solution:
xxxxxxxxxx1
.button {2
.success {3
background: green;4
}5
}
In many cases classes are used as namespaces and they are being duplicated as follows:
xxxxxxxxxx1
.button {2
font-weight: bold;3
}4
5
.button .success {6
background: green;7
}8
9
.button .danger {10
background: red;11
}To avoid situations like this, we can nest the styles inside the parent:
xxxxxxxxxx1
.button {2
font-weight: bold;3
4
.success {5
background: green;6
}7
8
.danger {9
background: red;10
}11
}
