reactjs - Can I use css-modules with LESS + nesting? -
the documentation on css-modules pretty sparse, i'm not sure if can or not.
this article says way i'd style button normal
, error
states this:
.common { /* font-sizes, padding, border-radius */ } .normal { composes: common; /* blue color, light blue background */ } .error { composes: common; /* red color, light red background */ }
but i'd prefer write this:
.common { /* font-sizes, padding, border-radius */ &.normal { /* blue color, light blue background */ } &.error { /* red color, light red background */ } }
like i've done, without introducing new composes
syntax. think it's more clear styles build on top of other styles if can nest them in code.
but don't know exported css-modules? examples give simple class name selectors. have no idea .common.normal
exported as, or .common > .normal ~ .strange
? have not use kind of css selector if use css-modules?
i using less css modules, don't think way using '&' fits goal of css modules. understanding 'composes' more analogous @import &, , find myself using & psuedo-classes.
you can things way have here, don't find bit strange have specify both 'common' , 'normal' classes in html? better in opinion specify 'normal', , let normal inherit shared styles using 'compose'.
Comments
Post a Comment