css - LESS - Using nested @import with parent selector -
i use "&" parent selector in less in combination nested @import statement overide variable definitions within specific scope. consider following files
style.less:
@import 'component-variables.less'; @import (multiple) 'component.less'; .@{contrastwrapperclass}, .@{contrastwrapperclass}&{ @componentbackgroundcolor:#00ff00; @import (multiple) 'component.less'; }
component-variables.less:
@contrastwrapperclass: componentcontrast; @componentbackgroundcolor: #ff0000;
component.less:
.component { background-color: @componentbackgroundcolor; }
i expect compile to
.component { background-color:#ff0000; } .componentcontrast .component, .componentcontrast.component { background-color:#00ff000; }
it compiles to:
.component { background-color:#ff0000; } .componentcontrast .component, .componentcontrast .component { background-color:#00ff000; }
in example, goal switch background-color .component element has "componentcontrast" class or child of element "componentcontrast" class.
Comments
Post a Comment