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

@grid_margin: 20px;
@grid_length: 12;
@unit: 1px;

.row {
    margin-left: -@grid_margin;
    *zoom: 1;
}

[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: @grid_margin;
}

.span (@length) when (@length > 0) {
    .span@{length} {
        width: (@length * 60 + (@length - 1) * 20) * @unit;
    }

    .span(@length - 1);
}

.span (0) {}

.span (@grid_length);

.offset (@length) when (@length > 0) {
    .offset@{length} {
        margin-left: (@length * 60 + (@length + 1) * 20) * @unit;
    }

    .offset(@length - 1);
}

.offset (0) {}

.offset (@grid_length);


@grid_margin_percent: (1 / (@grid_length * 4 - 1));

.row-fluid {
    width: 100%;
    *zoom: 1;
}

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

.row-fluid [class*="span"] {
    display: block;
    float: left;
    min-height: 30px;
    margin-left: percentage(@grid_margin_percent);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fluid_span (@length) when (@length > 0) {
    .row-fluid .span@{length} {
        width: percentage((@length * 4 - 1) * @grid_margin_percent);
    }

    .fluid_span(@length - 1);
}

.fluid_span (0) {}

.fluid_span (@grid_length);

.fluid_offset (@length) when (@length > 0) {
    .row-fluid .offset@{length} {
        margin-left: percentage((@length * 4 + 1) * @grid_margin_percent);
    }

    .fluid_offset(@length - 1);
}

.fluid_offset (0) {}

.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多少有些程序语言的味道，刚才的示例写的比较仓促，应该进一步重构，比如：引入解释性的变量，去掉“魔法数字”等。