Components may have variants. Elements may have variants, too.
Classnames for variants will be prefixed by a dash (-
).
.like-button {
&.-wide { /* ... */ }
&.-short { /* ... */ }
&.-disabled { /* ... */ }
}
Elements may also have variants.
.shopping-card {
> .title { /* ... */ }
> .title.-small { /* ... */ }
}
A dash is the preferred prefix for a variant because:
_
or -
.gcc -O2 -Wall -emit-last
).How do you deal with complex elements? Nest them. Continue →