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盒子模型：http://www.w3school.com.cn/css/css_boxmodel.asp。
• CSS繼承模型。
• CSS層疊模型：。
• CSS文檔流：http://www.w3school.com.cn/css/css_positioning.asp。
• 自適應佈局。

最好的教程就是官方教程：http://www.w3school.com.cn/css/index.asp。

柵格系統實戰

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多少有些程序語言的味道，剛纔的示例寫的比較倉促，應該進一步重構，好比：引入解釋性的變量，去掉「魔法數字」等。