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

Popular posts from this blog

matlab - error with cyclic autocorrelation function -

django - (fields.E300) Field defines a relation with model 'AbstractEmailUser' which is either not installed, or is abstract -

c# - What is a good .Net RefEdit control to use with ExcelDna? -