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

Popular posts from this blog

Email notification in google apps script -

c++ - Difference between pre and post decrement in recursive function argument -

javascript - IE11 incompatibility with jQuery's 'readonly'? -