3

我正在尝试为某些表格行声明背景图像图标：

.i(@file:'file.png', @type) {
    &.@{type} {
      td:first-child {
        background-image: url('../img/@{file}');
      }
    }
  }

我希望能够一次传递多种图像类型：

.i('code.png', 'asp, php, rb, py')

并让它有效地做到这一点：

.i(@file:'file.png', @type) {
  &.@{type1},
  &.@{type2},
  &.@{type3},
  &.@{type4}, {
    td:first-child {
      background-image: url('../img/@{file}');
    }
  }
}

我知道 CSS 输出会有所不同，最后一个代码示例用于说明目的。

除了将一堆空选择器声明为占位符之外，关于如何实现这一点的任何想法？

4

1 回答 1

7

更新为 LESS 1.5

此代码在 LESS 的更高版本中更有效地产生相同的效果，使用LESS 1.5+ 中可用的更新extract()和功能。length()输出将与原始示例相同。

.i(@file:'file.png', @types) {

  //find length to make the stop point
  @stopIndex: length(@types);

  //set up our LESS loop (recursive)
  .loopTypes (@index) when (@index =< @stopIndex) {
    @class: extract(@types,@index);
    //print the CSS
    &.@{class} {
        td:first-child {
          background-image: url('../img/@{file}');
        }
      }

        // next iteration
        .loopTypes(@index + 1);
    }

    // "call" the loopingClass the first time getting first item
    .loopTypes (1);
}

.myClass {
  .i('code.png'; asp, php, rb, py;);
}

在 LESS 1.3.3 中使用循环和内联 JavaScript

这花了几个小时才想出来（不，我没有很多空闲时间来研究它，我只是上瘾了……）。花费时间最长的部分之一是弄清楚为什么@stopIndex当我返回数组时我没有被 LESS 视为数字.length，并引发类型错误。我终于发现我需要明确告诉它使用unit()LESS 的功能将其视为一个数字。

该解决方案利用了这些来源的一般概念：

  1. LESS循环
  2. LESS 中的Javascript 函数

较少的

.i(@file:'file.png', @type) {
  //find length to make the stop point
  @stopIndex: unit(`(function(){ return @{type}.split(",").length})()`);
  //need to get the first item in @type
  @firstClass: ~`(function(){ 
      var clsArray = @{type}.replace(/\s+/g, '').split(",");   
      return clsArray[0]; 
    })()`;

  //set up our LESS loop (recursive)
  .loopTypes (@index, @captureClass) when (@index < @stopIndex) {
    @nextClass: ~`(function(){ 
      var clsArray = @{type}.replace(/\s+/g, '').split(",");
      //don't let it try to access past array length
      if(@{index} < (@{stopIndex} - 1)) {
       return clsArray[@{index} + 1]; 
      } 
      else { return '' }
    })()`;

    //print the CSS
    &.@{captureClass} {
        td:first-child {
          background-image: url('../img/@{file}');
        }
      }

        // next iteration
        .loopTypes(@index + 1, @nextClass);
    }

    // define guard expressoin to end the loop when past length
    .loopTypes (@stopIndex, @captureClass) {}

    // "call" the loopingClass the first time getting first item
  .loopTypes (0, @firstClass);
}

.myClass {
  .i('code.png', 'asp, php, rb, py');
}

CSS 输出

.myClass.asp td:first-child {
  background-image: url('../img/code.png');
}
.myClass.php td:first-child {
  background-image: url('../img/code.png');
}
.myClass.rb td:first-child {
  background-image: url('../img/code.png');
}
.myClass.py td:first-child {
  background-image: url('../img/code.png');
}
于 2013-01-24T15:02:57.803 回答