There is a way to use guards for individual (or multiple) attributes. @debug: true; header { /* guard for attribute */ & when (@debug = true) { background-color: yellow; } /* guard for nested class */ #title when (@debug = true) { background-color: orange; } } /* guard for class */ article when (@debug = … Read more
Yes, Less.js introduced extend in v1.4.0. :extend() Rather than implementing the at-rule (@extend) syntax used by SASS and Stylus, LESS implemented the pseudo-class syntax, which gives LESS’s implementation the flexibility to be applied either directly to a selector itself, or inside a statement. So both of these will work: .sidenav:extend(.nav) {…} or .sidenav { &:extend(.nav); … Read more
The & character has the function of a this keyword, actually (a thing I did not know at the moment of writing the answer). It is possible to write: .class1 { &.class2 {} } and the CSS that will be generated will look like this: .class1.class2 {} For the record, @grobitto was the first to … Read more
Use Variable Interpolation: @url: “@{root}@{file}”; Full code: @root: “../img/”; @file: “test.css”; @url: “@{root}@{file}”; .px{ background-image: url(@url); }
There are at least 2 problems with what you are trying to do (for LESS >=1.6 see update bellow): 1) Unfortunately it is not possible to call a mixin using selector interpolation. With selector interpolation LESS expects the construct to be of following format: .@{selector-string} { property:value; } (the interpolated selector can have also some … Read more
After digging for a while, I found that the error was coming from the mixin.less file where the #grid stuff was getting defined. This is what the file had originally: (~”.span@{index}”) { .span(@index); } After reading the LESS change log, I found that they changed the syntax so you can now use variables directly without … Read more
There’s contrast function, e.g.: li { color: contrast(@bodyBackground, lighten(@bodyBackground, 13%), darken(@bodyBackground, 13%)); }
Extending a dynamically formed selector (loosely using the term) like that is currently not possible in Less. There is an open feature request to support this. Till it is implemented, here are two work-around solutions to it. Option 1: Write the contents of .hello and .hello-world selectors into a separate Less file (say test.less), compile … Read more
I suppose you want to achieve a stair visually. In this case you can do it like below: .parent { line-height: 1.2em; } .parent>div:not(:first-child)::before { content: “”; float: left; width: 15px; /*your padding*/ height: calc(1.2em + 2px); } <div class=”parent”> <div>0</div> <div>15</div> <div>30</div> <div>45</div> <div>60</div> <div>75</div> </div>
I also have been pondering this use further since we encountered it in that question you referenced. While I cannot answer definitively that this is a “bug” use for & (BoltClock seems to make a good argument that it is not a bug), I want to argue for the value of it (which argues it … Read more