LESS &:extend not compiling property in Visual Studio with Web Essentials 4 -
this first question , tried search first couldn't find answer.
i using web essentials 4 in ms visual studio compile less files css.
it works fine, wanted try using &:extend functionality of less, won't compile correctly. ignores &:extend part.
so have simple .less file, code:
#em-main { nav ul { &:extend(.inline); background: blue; } .inline { color: red; } } and output.
#em-main nav ul { background: blue; } #em-main .inline { color: red; } if take out #em-main, compiles fine. limitation of less or wrong setup?
thanks
i wonder if possible try do. in fact try extend #em-main .inline not possible, see also: less: extend defined nested selector, https://github.com/less/less.js/issues/1597 , on.
possible use mixin or ruleset:
@set-color: { color: red; }; #em-main { nav ul { @set-color(); background: blue; } .inline { @set-color(); } } ** update **
the above compiles into:
#em-main nav ul { color: red; background: blue; } #em-main .inline { color: red; } but @harry wrotes:
i think using :extend(#em-main .inline) (full selector path) work.
and right (of course);
#em-main { nav ul { &:extend(#em-main .inline); background: blue; } .inline { color: red; } } compiles into
#em-main nav ul { background: blue; } #em-main .inline, #em-main nav ul { color: red; }
Comments
Post a Comment