我正在尝试找出 Joni Korpi 的 Frameless CSS 无框架网格(http://framelessgrid.com/)并且我很难阅读他拥有的 .less 文件。我对 LESS 使用变量有一个基本的了解,所以我知道 column = 48 和 gutter = 24 ,仅此而已。
1 列 = 1 * (48 + 24) - 24)/ 12 吗?
我不明白的是@1col: @1cols;
and .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
or @1cols
它们都是相同的值。
@1cols: ( 1 * (@column + @gutter) - @gutter) / @em;
这只是数学。如果您想要一个 3 列宽度的部分,则为(列宽 + 装订线宽度)的 3 倍减去 1 个装订线。
.width (@cols:1) {
width: (@cols * (@column + @gutter) - @gutter) / @em;
}
这是一个 mixin 函数,它采用可变数量的列,默认参数为 1。您可以像这样使用它:
.my-class{
.width(3);
}
/* these two are identical */
.my-class{
width: @3cols;
}
第一种方法的好处是可以替换3
带有变量,以便您可以在其他地方使用它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)