如何阅读这个LESS css？

我想弄清楚Joni Korpi的无框架CSS无框网格（http://framelessgrid.com/），并且我很难读取他拥有的.less文件。我有一个基本的理解，即LESS使用变量，所以我知道column = 48和gutter = 24就是这样。如何阅读这个LESS css？

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

来源

2012-01-17 Danger14

@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与一个变量，所以你可以在别处使用它。

来源

2012-01-17 03:17:35 Davy8

@是可变标识符...类似于在PHP $。

所以他在做的是定义一个混合，它在某些方面就像一个函数，如果没有提供参数，则参数@cols的默认值为1。这混入那么width CSS属性设置为表达式的值：

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

你@em值将是1EM的像素我觉得值。所以，如果你的基本字体大小为12，然后@em = 12

至于@1col: @1cols;那只是一个方便的，这样就可以使用@1col（单数）或@1cols（复数），他们的意思是一样的。

来源

2012-01-17 03:12:59 prodigitalson

另一个回答很好地解释了LESS文件的作用，所以我会谈谈他使用@em。

如果你

.some_class { 
    just_an_em: @em 
}

在

。少文件，它会出来

.come_class { 
    just_an_em: 16em 
}

在.css编译后。这似乎是因为LESS在分割时保留了单位，所以'16/@ em'给出'1em'，如预期的那样。

来源

2012-01-17 14:17:53 MarkovCh1

如何阅读这个LESS css？

回答

相关问题