Sprites LESS CSS变量增加问题 [英] Sprites LESS CSS Variable increment issue

问题描述

我在使用变量计算精灵背景位置时遇到问题:

我的代码如下:

@counter: 1;

#my-icon-bundle {
.my-icons () {
  #my-icon-bundle .myIconX("classX1", @counter);
  #my-icon-bundle .myIconX("classYY1", @counter);
  ...
}

.myIconX(@name, @index) {
  @nameText: ~".my-icon-@{name}";
  @{nameText} { #my-icon-bundle .myIcon(@index); }

  @counter: @index + 1;
}

.myIcon(@row) {
  @x: some calculations based on @row
  @y: some calculations based on @row
  background-position: -@x -@y;
}
}

问题是@counter增量不能正常工作，如果我们替换，所有图标将在sprite图像中显示为第二个图标.

#my-icon-bundle .myIconX("classX1", @counter);

使用计数器的值可以正确显示...任何想法如何正确增加全局值? 谢谢(PS:我使用的是较少的1.4.2)

解决方案

严格说你不能

LESS中的变量本质上是常数，一旦在特定范围内定义，就不能更改(包括递增).因此，您的@counter: @index + 1;根本没有增加全局变量，而是在.myIconX()的特定调用内为局部作用域@counter变量创建了新值. 请参阅有关LESS中变量如何工作的文档.

通过递归局部变量设置进行仿真

这是有效的，基于被认为是此处错误的信息，但是我不相信严格说来是个bug.无论如何，它可以用来满足您的需求(我刚刚实现了@row: 1并调整了一些代码以显示计算工作):

 @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");
 

输出CSS为:

.my-icon-classX1 {
  background-position: -1 -1;
}
.my-icon-classX1 {
  background-position: -2 -2;
}
.my-icon-classYY1 {
  background-position: -3 -3;
}

这表明，每次调用.myIconX() mixin时，它都会通过+1为下一次调用设置计数器.

警告::此解决方案是否基于错误行为值得怀疑，但如果是错误，则该解决方案将来可能会消失.有关此方法的局限性的更多评论，请请参见此处的讨论.. >

I have a problem with sprites background position calculation using a variable:

My code looks something like this:

@counter: 1;

#my-icon-bundle {
.my-icons () {
  #my-icon-bundle .myIconX("classX1", @counter);
  #my-icon-bundle .myIconX("classYY1", @counter);
  ...
}

.myIconX(@name, @index) {
  @nameText: ~".my-icon-@{name}";
  @{nameText} { #my-icon-bundle .myIcon(@index); }

  @counter: @index + 1;
}

.myIcon(@row) {
  @x: some calculations based on @row
  @y: some calculations based on @row
  background-position: -@x -@y;
}
}

The problem is that the @counter increment does not work properly, and all icons appear as the second icon in the sprite image, if we replace:

#my-icon-bundle .myIconX("classX1", @counter);

with the value of the counter it appears correctly...any ideas how to increment the global value properly? Thanks (PS: I'm using less 1.4.2)

解决方案

Strictly Speaking You Cannot

Variables in LESS are essentially constants once defined in a particular scope, and so cannot be changed (including incremented). So your @counter: @index + 1; is not incrementing the global variable at all, but rather creating a new value for a local scope @counter variable inside that particular call of .myIconX(). See the documentation on how variables work in LESS.

Emulated by Recursive Local Variable Setting

This works, based off information deemed a bug here, 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 @row: 1 and tweaked some code to show the calculation working):

@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");

Output CSS is:

.my-icon-classX1 {
  background-position: -1 -1;
}
.my-icon-classX1 {
  background-position: -2 -2;
}
.my-icon-classYY1 {
  background-position: -3 -3;
}

This demonstrates that with each call of the .myIconX() mixin, it is setting the counter by +1 for the next call.

Warning: 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, see the discussion here.

这篇关于Sprites LESS CSS变量增加问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！