2

我正在尝试找出 Joni Korpi 的 Frameless 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;
}
4

3 回答 3

4

@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用一个变量替换,这样你就可以在其他地方使用它。

于 2012-01-17T03:17:35.080 回答
1

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

因此,他所做的是定义一个在某些方面类似于函数的 mixin,它采用@cols默认值1if none 提供的参数。然后这个 mixin 将widthcss 属性设置为表达式的值:

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

我认为您@em的值将是 1em 的值(以像素为单位)。因此,如果您的基本字体大小为 12,则@em= 12。

@1col: @1cols;这只是一种方便,您可以使用@1col(单数)或@1cols(复数),它们的含义相同。

于 2012-01-17T03:12:59.250 回答
1

其他答案很好地解释了 LESS 文件的作用,所以我将谈谈他对@em.

如果你这样做

.some_class { 
    just_an_em: @em 
}

在你的 .less 文件中,它会出来

.come_class {
    just_an_em: 16em
}

编译后在 .css 中。这似乎是因为 LESS 在除法时保留了单位,因此 '16/@em' 给出了 '1em',正如预期的那样。

于 2012-01-17T14:17:53.053 回答