1.什么是Less?
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。称这种语言叫语法糖（糖衣语法）
使用less的方法：
1.服务端：nodejs
2.浏览器：在浏览器环境中使用 Less
3.客户端：koala工具
Less原理
本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。Less没有裁剪CSS原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
less文件中，你想写less就写less，你想css就写css，混着写都是可以的
Less的使用：
引入 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
注意：Less源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。
比如：
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body class="container"> <h1>Example using Nested Directives</h1> <p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p> </body> </html>
创建文件style.less
.container{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
.myclass{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}
}
生成的 CSS
.container h1 {
font-size: 25px;
color: #E45456;
}
.container p {
font-size: 25px;
color: #3C7949;
}
.container .myclass h1 {
font-size: 25px;
color: #E45456;
}
.container .myclass p {
font-size: 25px;
color: #3C7949;
}
定义变量
@变量名: 变量值; //格式
@bgColor: #000; //格式举例
创建文件style.less
// 定义变量
@bgColor: #000;
// 引用变量
body{
background-color: @bgColor;
}
less文件编译为 css 文件后
body{
background-color: #000;
}
使用嵌套
正常css代码
.container {
1024px;
}
.container > .row {
height: 100%;
}
.container > .row a {
color: #f40;
}
.container > .row a:hover {
color: #f50;
}
创建文件style.less
.container {
@containerWidth;
> .row {
height: 100%;
a {
color: #f40;
&:hover {
color: #f50;
}
}
}
div {
100px;
.hello {
background-color: #00f;
}
}
}
less文件编译为 css 文件后
.container {
1024px;
}
.container > .row {
height: 100%;
}
.container > .row a {
color: #f40;
}
.container > .row a:hover {
color: #f50;
}
.container div {
100px;
}
.container div .hello {
background-color: #00f;
}
Mixin
把重复的代码放到一个类当中，每次只要引用类名，就可以引用到里面的代码了
（1）在 less 文件中定义一个类
/* 定义一个类 */
.roundedCorners(@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
（2）在 less 文件中引用上面这个类：
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
header 中的引用没有带参数，表示参数为缺省值； footer 中的引用带了参数，那就用这个参数。
Import
将不同的样式放到多个文件中，最后通过@import 的方式合并
被引用的less文件，名为_button1.less：
.btn{
line-height: 100px;
color: @btnColor;
}
在 main.css 中引用上面的 _button1.less
@btnColor: red;
@import url(`_button1.less:');
body{
1024px;
}