StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Strictly Speaking You Cannot</h2> <p>Variables in LESS are essentially constants once defined in a particular scope, and so cannot be changed (including incremented). So your <code>@counter: @index + 1;</code> is not incrementing the global variable at all, but rather creating a new value for a local scope <code>@counter</code> variable inside that particular call of <code>.myIconX()</code>. <a href="http://lesscss.org/#-variables" rel="nofollow">See the documentation on how variables work in LESS</a>.</p> <h2>Emulated by Recursive Local Variable Setting</h2> <p>This works, based off information deemed a <a href="https://gist.github.com/seven-phases-max/7647414" rel="nofollow">bug here</a>, but which I do not believe is strictly speaking a bug. At any rate, it can be utilized to meet your needs like so (I just implemented an <code>@row: 1</code> and tweaked some code to show the calculation working):</p> <pre class="lang-css prettyprint-override"><code>@row: 1; .init() { .inc-impl(1); } .init(); .inc-impl(@new) { .redefine() { @counter: @new; } } #my-icon-bundle { .my-icons () { #my-icon-bundle .myIconX("classX1", @counter); #my-icon-bundle .myIconX("classYY1", @counter); } .myIconX(@name) { .redefine(); .inc-impl((@counter + 1)); @nameText: ~".my-icon-@{name}"; @{nameText} { #my-icon-bundle .myIcon(@row); } } .myIcon(@row) { @x: @row * @counter; @y: @row * @counter; background-position: -@x -@y; } } #my-icon-bundle .myIconX("classX1"); #my-icon-bundle .myIconX("classX1"); #my-icon-bundle .myIconX("classYY1"); </code></pre> <p>Output CSS is:</p> <pre><code>.my-icon-classX1 { background-position: -1 -1; } .my-icon-classX1 { background-position: -2 -2; } .my-icon-classYY1 { background-position: -3 -3; } </code></pre> <p>This demonstrates that with each call of the <code>.myIconX()</code> mixin, it is setting the counter by <code>+1</code> for the next call.</p> <p><strong>Warning:</strong> Whether this solution is based on buggy behavior or not is questionable, but if it is a bug, this solution may disappear in the future. For further comments on the limitations of this method, <a href="https://github.com/less/less.js/issues/1678" rel="nofollow">see the discussion here</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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