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 div # menu ul li {background-image : URL ('images / menu.png'); } It basically lets you create any selector string, but the name of the file will be the initial selector, in which the file name must have something valid.
No comments:
Post a Comment