Skip to main content

How to exclude some of the multiple variants?

.component.primary, The selector you want to omit.componentThe element you want to style.secondaryThe selector you want to keepThe selector you want to omit, .component.tertiary
+variant('{priority}', '.primary', '.secondary', '.tertiary')

display: flex

display: inline-flex

background: red

background: green

background: blue

.component {
display: flex;

.component.primary, .component.secondary, .component.tertiary {
display: inline-flex;
.component.primary {
background: red;
.component.secondary {
background: green;
.component.tertiary {
background: blue;

More info: +only-for, +variant, +register, +component