css - 如何阅读此LESS CSS？

我试图弄清Joni Korpi的无框架CSS无框架网格（http://framelessgrid.com/），而我很难读取他拥有的.less文件。我对LESS使用变量有基本的了解，所以我知道column = 48和gutter = 24就是这样。

1cols = 1 *（48 + 24）-24）/ 12吗？

我不明白的是@1col: @1cols;和.width (@cols:1) { width: (@cols * (@column + @gutter) - @gutter) / @em; }

有人可以帮忙吗？

https://github.com/jonikorpi/Frameless/blob/master/frameless.less

@font-size: 16;         // Your base font-size in pixels
@em: @font-size*1em;    // Shorthand for outputting ems, e.g. "12/@em"

@column: 48;    // The column-width of your grid in pixels
@gutter: 24;    // The gutter-width of your grid in pixels


//
// Column-widths in variables, in ems
//

 @1cols: ( 1 * (@column + @gutter) - @gutter) / @em; @1col: @1cols;
 @2cols: ( 2 * (@column + @gutter) - @gutter) / @em;
 @3cols: ( 3 * (@column + @gutter) - @gutter) / @em;
 @4cols: ( 4 * (@column + @gutter) - @gutter) / @em;
 @5cols: ( 5 * (@column + @gutter) - @gutter) / @em;
 @6cols: ( 6 * (@column + @gutter) - @gutter) / @em;
 @7cols: ( 7 * (@column + @gutter) - @gutter) / @em;
 @8cols: ( 8 * (@column + @gutter) - @gutter) / @em;
 @9cols: ( 9 * (@column + @gutter) - @gutter) / @em;
@10cols: (10 * (@column + @gutter) - @gutter) / @em;
@11cols: (11 * (@column + @gutter) - @gutter) / @em;
@12cols: (12 * (@column + @gutter) - @gutter) / @em;
@13cols: (13 * (@column + @gutter) - @gutter) / @em;
@14cols: (14 * (@column + @gutter) - @gutter) / @em;
@15cols: (15 * (@column + @gutter) - @gutter) / @em;
@16cols: (16 * (@column + @gutter) - @gutter) / @em;


//
// Column-widths in a function, in ems
//

.width (@cols:1) {
width: (@cols * (@column + @gutter) - @gutter) / @em;
}

最佳答案

@1cols等仅仅是变量名。 less中的变量名允许以数字开头。

@1col: @1cols;

这就是说变量@1col等于之前设置的变量@1cols的说法。大概是“ 1col”，因为1是单数，但是其他的是复数，因此它只为您提供了使用@1col或@1cols这两个值都相同的选项。

@1cols: ( 1 * (@column + @gutter) - @gutter) / @em;

那只是数学。如果您想要的部分的宽度为3列，那是（列宽+装订线宽度）减去一个装订线的3倍。

.width (@cols:1) {
width: (@cols * (@column + @gutter) - @gutter) / @em;
}

这是一个mixin函数，它使用可变数量的列，默认参数为1。您可以像这样使用它：

.my-class{
   .width(3);
}
/* these two are identical */
.my-class{
   width: @3cols;
}

第一种方法的好处是您可以将3替换为变量，以便可以在其他地方使用它。