How to declare a variant with :not() selector?
.component buttonThe element you want to styleThe selector you want to insert:not(.btn)
- SASS
+component('#footer')
+register
+variant('.mini')
+element('button')
+variant(':not(.btn)')
display: flex
+____________________________
+element('button')
+default
display: inline-flex
font-size: 1.25em
+variant(':not(.btn)')
+default
background: orange
+variant('.mini')
font-size: 0.75em
- CSS
#footer {
display: flex;
}
#footer button {
display: inline-flex;
font-size: 1.25em;
}
#footer button:not(.btn) {
background: orange;
}
#footer.mini button:not(.btn) {
font-size: 0.75em;
}
More info: +variant, +default, +element, +register, +component, separator +___