如何阅读这个更少的css？

Question

我试图弄清楚Joni Korpi的Frameless frameless (http://framelessgrid.com/)，但我很难读懂他的.less文件。我有一个基本的理解，那就是较少使用变量，所以我知道column = 48和gutter = 24，仅此而已。

1 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;
}

Answer 1

@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;
}

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

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

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

Answer 2

@是一个变量标识符...类似于php中的$。

所以他所做的就是定义一个mixin，它在某些方面类似于一个函数，如果没有提供，它接受参数@cols，缺省值为1。然后，此混合将width css属性设置为表达式的值：

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

我想你的@em值应该是1em的像素值。所以如果你的基本字号是12，那么@em = 12。

至于@1col: @1cols;，这只是一个方便，这样你就可以使用@1col (单数)或@1cols (复数)，它们的意思是一样的。

Answer 3

其他答案很好地解释了文件做的更少的事情，所以我将讨论他对@em的使用。

如果你这样做了

.some_class { 
    just_an_em: @em 
}

在您的.less文件中，它将显示为

.come_class {
    just_an_em: 16em
}

编译后在.css中。这似乎是因为LESS在除法时保留了单位，所以正如预期的那样，'16/@em‘得到了'1em’。