Monday 15 September 2014

css - Use selector name as variable in LESS mixin -


I'm trying to make at least one mixer which is a selector name Will use The mixin should look something like this, but I have not found the exact syntax for it or if it is possible:

  .bg {background-image: url ('images / @ {SELECTORNAME} png' ); } #header {.bg; }   

Results in:

  #header {background-image: url ('images / header.png'); }   

I am thinking that this is not possible, plus what if the selector was something like this:

  div # menu ul li   

This will not really work, but maybe someone is aware of any alternative, this is possible in any other preprocessor.

Thank you!

You can not "read" the name of the selector.

However, you can create the selector in the form of a combination of a file name linking with something like this:

  .buildSelectorConnection (@selectorName, @pre: ~ '') {@ {pre} @ {selectorName} {background- Image: url ('images / @ {selectorName} .png'); }} .buildSelectorConnection (Header, ~ '#'); .buildSelectorConnection (do-a-class, ~ '.');  CSS output   Images / header.png '); }. A-class {background-image: url ('images / do-a-class.png'); }   

However, if you want to do something like this, then some other logic will decide on your part and reduce some javascript coding such as div # menu ul li. where the actual filename was generated div-menu-ul-li.png was something like.

However ...

Anything can be done:

less

  .buildSelectorConnection (@ selectorname, @ east: ~ '', @post: ~ '') {@ {prior} @ {selector name} @ {post} {background-image: Url ('image / @ {selector name} .png'); }} .buildSelectorConnection (menu, ~ 'div #', ~ 'ul li');   

CSS output

No comments:

Post a Comment