less css预编译语言学习

less语言其实也是css语言的一种，只不过我认为的它是可以用编程化的思维来写样式，所以在大型工程里面需要整体修改一些样式的时候就会很方便，less的几大特色分别是 变量，混合，嵌套，函数和运算。
第一步，引入，less是需要编译的，可以下载插件，利用基于Node.js库，或者更简单的引入less.js文件直接在浏览器端预览。

<link rel="stylesheet/less" type="text/css" href="style.less" />
<script type="text/javascript" src="less.js"></script>

引入有几点要注意的：
1.引入less文件的时候rel要写成”stylesheet/less”;
2.less文件要在js文件之前引入;
3.需要特别注意的是，由于浏览器端使用时是使用ajax来拉取.less文件，因此直接在本机文件系统打开（即地址是file://开头）或者是有跨域的情况下会拉取不到.less文件，导致样式无法生效。
第二步，来使用一下less的基本功能。
变量：

/*变量*/
@color: #4D926F;

#header {
    background: @color;
    width:100px;
    height:100px;
}

混合：
个人认为这一点在运用在css3的在多浏览器写前缀的时候很有用，减小了很多工作量和重复的样式编写。在调用.rounded-corners 时可以自定义半径大小。

/*混合*/
.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    background: @color;
    width:100px;
    height:100px;
    .rounded-corners(20px);
}

样式嵌套

#header {
    background: @color;
    width:100px;
    height:100px;
    line-height: 50px;
    text-align: center;
    .rounded-corners(20px);
/*嵌套*/
    h2 {
        font-size: 18px;
        font-family: "微软雅黑";
        color:#fff;
        a {
            text-decoration: none;
            color:#F69938;
            &:hover {
                color:#F6E938;
            }
        }
    }
}

以上写法其实编译成CSS的语言就是类似于

#header h2 a{
    text-decoration: none;
    color:#F69938;
}

#header h2 a:hover{
    color:#F6E938;
}

函数和运算：
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。

/*函数*/
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header{
    color: (@base-color * 3);
    border-left: @the-border*5;
    border-right: (@the-border * 3);
    border-color:#000
}