如何阅读这个LESS CSS? [英] How to read this LESS css?
问题描述
我想弄清楚Joni Korpi的无框架CSS无框架网格( http://framelessgrid.com/ )和我有一个很难读的.less文件他有。我有一个基本的了解,LESS使用变量,所以我知道column = 48和gutter = 24,这是关于它。
I am trying to figure out Joni Korpi's Frameless CSS frameless grid (http://framelessgrid.com/) and I'm having a hard time reading the .less file he has. I have a basic understanding that LESS uses variables so I know column = 48 and gutter = 24 and that's about it.
是否1cols = 1 *(48 + 24) - 24)/ 12?
Does 1cols = 1 * (48 + 24) - 24)/ 12 ?
t理解是 @ 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
等只是变量名。 少于
中的变量名称允许以数字开头。
@1cols
etc are just variable names. Variable names in less
are allowed to start with numbers.
@1col: @1cols;
这就是说变量 @ 1col
等于之前设置的变量 @ 1cols
。大概是1col,因为1是单数,但其他是复数,所以它只是让你选择使用 @ 1col
或 @ 1cols
That's just making the saying that variable @1col
equals the variable @1cols
set earlier. Presumably, "1col" because 1 is singular, but the others are plural, so it just gives you the option of using either @1col
or @1cols
both of them being the same value.
@1cols: ( 1 * (@column + @gutter) - @gutter) / @em;
这只是数学。如果你想要一个3列宽的部分,这是(列宽+格槽宽度)减去一个gutter的3倍。
That's just math. If you want a section that's 3 columns width, that's 3 times the (column width + gutter width) minus one gutter.
.width (@cols:1) {
width: (@cols * (@column + @gutter) - @gutter) / @em;
}
这是一个mixin函数, 1.你可以这样使用它:
That's a mixin function that takes a variable number of columns with a default parameter of 1. You can use it like this:
.my-class{
.width(3);
}
/* these two are identical */
.my-class{
width: @3cols;
}
第一种方法的好处是可以替换 3
使用变量,以便您可以在其他位置使用它。
The benefit of the first method is that you can replace 3
with a variable so you can use it elsewhere.
这篇关于如何阅读这个LESS CSS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!