less

1、概述

less是一种动态样式语言，可以在css的基础上添加变量、混合、函数等，使css更易于扩充和维护

2、引用

外联样式中，rel的属性要设置为“stylesheet/less”

内联样式中，type属性要设置成“text/less”

同时引入less.js文件，注意该文件一定要在less样式之后引入

3、用法

变量

less代码

@color: #ccc;
h1 {
     color: @color;
}

编译成css代码

h2 {
        color: #ccc;
 }

混合:less中可以定义一个通用的属性，然后在其它属性中调用它

less代码

.borderRadius{
    border-radius:5px;
}
.btn{
    color:#fff;
    .borderRadius;
}

编译成css代码

.btn{
    color:#fff;
    border-radius:5px;
}

函数：定义一个带参数的属性集合

less代码

.borderRadius(@radius){  
    border-radius:@radius; 
    -moz-border-radius:@radius; 
    -webkit-border-radius:@radius;
}
.btn{
    color:#fff;
    .borderRaduis(5px)
}