CSS：用Less实现栅格系统
背景
公司一直没有专职的前端和美工，Javascript相对来说我熟悉一点，CSS+HTML有四五年没有搞过了，最近要学一下，招聘或和美工配合的时候会有用处。
收集的资料
- CSS教程：http://www.w3school.com.cn/css/index.asp。
- LESS教程：http://www.lesscss.net/。
- SAAS教程：http://sass-lang.com/。
- Bootstrap教程：http://cnbootstrap.com/。
- 栅格教程：http://www.see-source.com/blog/300000033/273。
知识总结
- CSS盒子模型：定位和浮动。
- CSS继承模型：这部分可以边用边记。
- CSS层叠模型：这部分要记清楚。
最好的教程就是官方教程
栅格系统实战
less
1 @grid_margin: 20px;
2 @grid_length: 12;
3 @unit: 1px;
4
5 .row {
6 margin-left: -@grid_margin;
7 *zoom: 1;
8 }
9
10 [class*="span"] {
11 float: left;
12 min-height: 1px;
13 margin-left: @grid_margin;
14 }
15
16 .span (@length) when (@length > 0) {
17 .span@{length} {
18 width: (@length * 60 + (@length - 1) * 20) * @unit;
19 }
20
21 .span(@length - 1);
22 }
23
24 .span (0) {}
25
26 .span (@grid_length);
27
28 .offset (@length) when (@length > 0) {
29 .offset@{length} {
30 margin-left: (@length * 60 + (@length + 1) * 20) * @unit;
31 }
32
33 .offset(@length - 1);
34 }
35
36 .offset (0) {}
37
38 .offset (@grid_length);
39
40
41 @grid_margin_percent: (1 / (@grid_length * 4 - 1));
42
43 .row-fluid {
44 width: 100%;
45 *zoom: 1;
46 }
47
48 .row-fluid [class*="span"]:first-child {
49 margin-left: 0;
50 }
51
52 .row-fluid [class*="span"] {
53 display: block;
54 float: left;
55 min-height: 30px;
56 margin-left: percentage(@grid_margin_percent);
57 -webkit-box-sizing: border-box;
58 -moz-box-sizing: border-box;
59 box-sizing: border-box;
60 }
61
62 .fluid_span (@length) when (@length > 0) {
63 .row-fluid .span@{length} {
64 width: percentage((@length * 4 - 1) * @grid_margin_percent);
65 }
66
67 .fluid_span(@length - 1);
68 }
69
70 .fluid_span (0) {}
71
72 .fluid_span (@grid_length);
73
74 .fluid_offset (@length) when (@length > 0) {
75 .row-fluid .offset@{length} {
76 margin-left: percentage((@length * 4 + 1) * @grid_margin_percent);
77 }
78
79 .fluid_offset(@length - 1);
80 }
81
82 .fluid_offset (0) {}
83
84 .fluid_offset (@grid_length);
html
<div class="row">
<div class="span3"></div>
<div class="span6 offset3"></div>
<div class="clear-left"></div>
</div> <div class="row-fluid">
<div class="span3"></div>
<div class="span6 offset3"></div>
<div class="clear-left"></div>
</div>
运行效果
备注
Less多少有些程序语言的味道，刚才的示例写的比较仓促，应该进一步重构，比如：引入解释性的变量，去掉“魔法数字”等。