如何做一个在css中生成网格的.less mixin？答案

【问题标题】：How to do a .less mixin that generates something of a grid in css?如何做一个在css中生成网格的.less mixin？
【发布时间】：2012-11-29 20:53:23
【问题描述】：

我想以 .cX.rY 选择器的形式生成一个 css 选择器矩阵，用于 10 x 10 之类的网格。但我不知道如何减少执行此操作（我对。较少的）。我也在使用 DotLess，所以也许有一些内置的限制；在这方面我不确定。

@col-width: -24px;
@row-width: -24px;


.img-pos(@col, @row) {
    background-position:
       (((@col - 1) * @col-width) - 1)
       (((@row - 1) * @row-width) - 1);
}

.c2.r1 { .img-pos(2, 1); }
.c2.r2 { .img-pos(2, 2); }
.c2.r3 { .img-pos(2, 3); }
.c2.r4 { .img-pos(2, 4); }
.c2.r5 { .img-pos(2, 5); }
.c2.r6 { .img-pos(2, 6); }
.c2.r7 { .img-pos(2, 7); }
...


...
.cX.rY { .img-pos(2, 7); }

这可能吗？如果有，怎么做？

【问题讨论】：

标签： background-image less background-position

【解决方案1】：

这里有一些代码允许您设置最大列和行，以及可选地设置起始列和行号（默认值：1），并可选地为它们设置类指示符（默认为“c”和“ r")。它使用 LESS 中的循环技术来自动生成代码。

LESS 代码

@col-width: -24px;
@row-width: -24px;

.img-pos(@col, @row) {
    background-position:
       (((@col - 1) * @col-width) - 1)
       (((@row - 1) * @row-width) - 1);
}

.generateGridSelectors(@maxCols, @maxRows, @colStart: 1, @rowStart: 1, @colSel: "c", @rowSel: "r") when (@maxCols > 0) and (@colStart < @maxCols) and (@maxRows > 0) and (@rowStart < @maxRows) {

   @colStop: @maxCols + 1;
   @rowStop: @maxRows + 1;

   .makeGrid(@c: @colStart) when (@c < (@maxCols + 1)) {

     .setRow(@r: @rowStart) when (@r < (@maxRows + 1)) {     

     //generate selector and position
     (~".@{colSel}@{c}.@{rowSel}@{r}") {
     .img-pos(@c, @r);
     }

     //interate next row
     .setRow(@r + 1);
   }
     //end row loop
     .setRow(@rowStop) {}

     //start row loop
     .setRow();

     //iterate next column
     .makeGrid(@c + 1);

   }
   //end column loop
   .makeGrid(@colStop) {}

   //start grid loops
   .makeGrid();
} //end generateGridSelectors

//call your build (not sure how well it will handle real large numbers)
.generateGridSelectors(10, 10);

CSS 输出

.c1.r1 {
  background-position: -1px -1px;
}
.c1.r2 {
  background-position: -1px -25px;
}
.c1.r3 {
  background-position: -1px -49px;
}
...
...
.c10.r8 {
  background-position: -217px -169px;
}
.c10.r9 {
  background-position: -217px -193px;
}
.c10.r10 {
  background-position: -217px -217px;
}

【讨论】：