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:@colorwidth:@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");