Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Not Strictly Possible</h2> <p>See <a href="http://lesscss.org/features/#variables-feature-lazy-loading" rel="nofollow noreferrer">the documentation on LESS variables</a>. Essentially, LESS variables are constants in the scope of their creation. They are lazy loaded, and cannot be "changed" in that way. The very last definition will be the one used for all in that scope. In your case an error will occur, because variables cannot reference themselves.</p> <p>Consider this example:</p> <pre class="lang-less prettyprint-override"><code>@counter: 1; .someSelector("nameOfClass", @counter); @counter: 2; .someSelector("nameOfClass1", @counter); .someSelector(@name; @count) { @className: ~"@{name}"; .@{className} { test: @count; } } </code></pre> <p>The output will be <code>2</code> for both:</p> <pre><code>.nameOfClass { test: 2; } .nameOfClass1 { test: 2; } </code></pre> <p>This is because LESS defines the <code>@counter</code> with the last definition of the variable in that scope. It does not pay attention to the <em>order</em> of the calls using <code>@counter</code>, but rather acts much like CSS and takes the "cascade" of the variable into consideration.</p> <p>For further discussion of this in LESS, you might track discussion that occurs on <a href="https://github.com/less/less.js/issues/1545" rel="nofollow noreferrer">this LESS feature request</a>.</p> <h2>Solution is in Recursive Call Setter for the Local Variable</h2> <p>Seven-phases-max <a href="https://gist.github.com/seven-phases-max/7647414" rel="nofollow noreferrer">linked</a> to what he believes to be a bug in LESS, but I don't think it is. Rather, it appears to me to be a creative use of recursive resetting of the counter to get the effect desired. This allows for you to achieve what you desire like so (using my example code):</p> <pre class="lang-less prettyprint-override"><code>// counter .init() { .inc-impl(1); // set initial value } .init(); .inc-impl(@new) { .redefine() { @counter: @new; } } .someSelector(@name) { .redefine(); // this sets the value of counter for this call only .inc-impl((@counter + 1)); // this sets the value of counter for the next call @className: ~"@{name}"; .@{className} { test: @counter; } } .someSelector("nameOfClass"); .someSelector("nameOfClass1"); </code></pre> <p>Here is the CSS output:</p> <pre><code>.nameOfClass { test: 1; } .nameOfClass1 { test: 2; } </code></pre> <p><strong>NOTE:</strong> I believe you are not strictly changing a global value here, but rather setting a new local value with each call to <code>.someSelector</code>. Whether this is based on buggy behavior or not is questionable, but if so, this solution may disappear in the future. For further comments of the limitations of this method, <a href="https://github.com/less/less.js/issues/1678" rel="nofollow noreferrer">see the discussion here</a>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload