轻松在mixin中重复选择器声明

Question

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

.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输出会有所不同,最后一个代码示例仅用于说明目的.

关于如何实现这一点的任何想法,只是将一堆空选择器声明为占位符？

Answer 1

已更新为LESS 1.5

此代码使用LESS 1.5+中提供的较新extract()和length()函数,在LESS 的更高版本中更有效地产生相同的效果.输出将与原始示例相同.

.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当我返回.length数组时,LESS没有被视为一个数字,并抛出类型错误.我终于发现我需要明确告诉它使用unit()LESS函数将其视为数字.

该解决方案利用了以下来源的一般概念:

1. 该LESS循环
2. 将在更短的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');
}