css>less编译

less语言是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

插入方式

1.用类似于winless的软件进行转换，将.less文件转化成.css，再进行常规插入。

2.用js文件辅助，代码如下：

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

less.js文件必须在引入的less文件之后。
引入less文件事rel的值必须为 stylesheet/less。

变量

1.声明变量
例如：

@widht:100px

2.使用变量
例如：

    @width:100px;
div{
    width:@widht;
}

3.变量的计算
可以进行加减乘除，例如:

@width*2

4.作用域
在选择器中定义变量就只能再选择器中可用。
在外面的全局变量则是全局有效。如果局部和全局变量名称相同，则是局部优先级高。

5.声明类
例子：

.Class(@color,@length){
background-color:@color
width:@length;
}

6.类
调用例子

.div1{
.myclass(red,100px);
}

7.0扩展
@argument可以代表所有传入变量，（…）代表写在生命中的变量，可表示一个或多个，例如

.border(...){
border:@arguments;
}

7.1名称相同可以用括号内的命名调用样式

.border(cool,@color){
border:2px solid @color;
}

.border(hot,@color){
border:1px solid @color
}

.div{
.border(hot,red)
}
调用第二个。

7.2.控制参数个数来控制调用哪个样式

.border(@a){….}

.border(@a,@b){...}

7.3条件语句判断调用哪个类

.border(@a) when (@a>10),(@a<3){
border:@a solid blue;
}
“,”表示“或”，“and”表示“且”。

8.嵌套

div{
margin: auto;
width: 300px;height: 800px;
    .u1{
    padding: 0px;margin: 0px;background-color: #cccccc;
        .l1{
        height: 100px;width: 100px;
            a{
             display: inline-block;height: 100%;width: 100%;
                &:hover{
                background-color: green;
                        }
             }
            }
        .l2{
        height: 100px;width: 100px;
            a{
                display: inline-block;height: 100%;width: 100%;
                &:hover{
                background-color: aqua;
                        }
             }
        }
    }

9.命名空间（Namespaces）
#font{
.font-style(@a){
font-style: @a;
}

    .font-weight(@b){
    font-weight: @b;
    }
    .color(@c){
    color: @c;
    }
    .font-size(@d){
    font-size: @d;
    }
    }

可以在同一个less中调用，也可以新建一个less文件使用@import调用，例如 
@import "font"；
使用例子：
.b{
#font>.color(red);
#font>.font-size(35px)
}

10.字符串插入

@base_url："http://coding.smashingmagazine.com";
background-image: url("@{base_url}/images/background.png");