less动态样式语言（预处理语言）

一、使用方法

Less是一门CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

1.客户端使用

1）下载less
2）编写项目less文件，导入less.js源码
注：在导入源码时须声明type = text/less，并且须在服务器端启动。同时导入项目less文件和源码的顺序不能反。

2.在服务器端使用

1）安装less
npm install less -g
2）编译less
lessc ./style/main.less ./style/main.css
3）在HTML页面中导入生成的css

3.安装kaola

kaola 是一款可以实时编辑less 的软件，它可以实时动态的把less 文件转为css 文件。比较方便，但是内存占用较大。
文件下载

二、代码编辑

集体代码示意：

.width(@width) {
    width: @width;
}

.height(@height) {
    height: @height;
}
@color:#fa5000;
#box {
    background: #f5f5f5;
    float: none;
    .width(auto);

    ol {
        .height(60px);
        margin: 0 auto;
        overflow: hidden;
        line-height: 30px;
        .width(1200px);
        list-style: none;
        text-align: center;

        li {
            float: left;
            padding: 0 40px;
            margin-left: -1px;
            white-space: nowrap;
            font-size: 20px;
            line-height: 60px;
            cursor: pointer;

            &:hover {
                color: @color;
                background: ghostwhite;
            }

            &.on {
                color: @color;
                background: ghostwhite;
            }
        }
    }
}

在less中使用@定义变量且不允许出现重复定义。

@with：100px；定义一个变量，命名为@with，值为100px。

less中的组合

one{color：red}
 .two{
		.one；
		width：@with；
} 
.tw（@color）{background：@color}

.携带默认参数
tree（@color：green）{}
传递参数
.foot {.two（red）}

less中的嵌套规则
ul{
	li{
    	img{}
	}
} 
ul{
	li{}
	img{}
	&:hover{
		&表示父元素
	}
}    

在 less中利用 @import “index”；导入 index.less文件
@import “base.css”；导入 base.css文件
匹配模式：

.color（r）{color:red;}
.color（l）{color:blue;}

多参传递：

.border（@w;@s；@c）{
	border:@arguments;
	//取所有参数
	}

运算规则:

@w:100px;
with:@w-50;
//当进行运算的时候两边只需有一个携带单位即可