共计 1940 个字符，预计需要花费 5 分钟才能阅读完成。
什么是 Less?
css 的 Less 好比是 js 的 Jquery，可以让人们更方遍快捷的使用 css，使 css 代码更简洁，可以减少重复的代码，减少开发人员的工作量。
Less CSS 是一种动态样式语言，属于 CSS 预处理语言的一种，它使用类似 CSS 的语法，为 CSS 赋予了动态语言的特性，如变量、继承、运算、函数等，更方便 CSS 的编写和维护
Less 和 Sass 的区别
Less 和 Sass 的主要不同就是他们的实现方式：Less 是基于 JavaScript，所以，是在客户端处理的。
Sass 是基于 Ruby 的，然后是在服务器端处理的。其实也有一个服务器端的 LESS 版本。在服务器上安装 LESS 的最简单的办法就是使用 Node Package Manager (NPM，一看就知道是基于 Node.js 的)
SASS 和 LESS 在变量作用域上也有明显差别。LESS 具有全局变量，而 SASS 暂时不具有全局变量的概念。
SASS 比 LESS 更完善的点还在于 SASS 能通过 @function 的方式编辑函数；通过 @for 循环或者 @each 循环对数据进行循环；通过 @if else 对数据进行判断
Less 的学习
注释 less 中有两种注释：/**/ 和 //。使用 /**/ 的注释是会被编译进 css 文件的，而使用 // 的注释不会被编译进 css 文件。由于我们应该一般编写和维护 less 文件，所以我们一般采用第二种注释，无需将注释编译进 css 文件。
变量 less 中使用 @声明一个变量，和一般程序语言不同的是，@符号与变量之间不能有空格 变量的使用：
//less 文件
@myWidth : 200px;
@myHeight : 500px;
#main {
width: @myWidth;
height: @myHeight;
background-color: yellowgreen;
}
混合
将 less 写法与常规的 css 写法进行混合书写
//less 文件
@charset “utf-8”;
@myWidth : 200px;
@myHeight : 200px;
#main {
width: @myWidth;
height: @myHeight;
background-color: yellowgreen;
.border
}
.border {
border:3px solid pink
}
可以带参数, 设置默认值：
//less
.border(@mywidth: 4px){
border: @mywidth solid green;
}
.mybox {
.border(5px);
}
//css
.mybox {
border: 5px solid green;
}
4. 匹配模式
// 根据不同的参 数可以匹配不同的样式：
.pos(r) {
position:relative;
}
.pos(a) {
position:absolute;
}
.pos(f) {
position:fixed;
}
.pipei {
width:200px;
height:200px;
background-color:green;
.pos(f); //.pos(r) .pos(a) 传入不同的参数，实现不同的定位方式
}
5. 运算 less 中可以实现运算，任何数字、颜色或者变量都可以参与运算（+ – * /），运算应该被包裹在括号中
//less
.border(@mywidth:4px){
border: @mywidth + 5px solid green; // 这里的单位可以省略，但是两者必须有一个带单位
}
.mybox {
.border();
}
//css
.mybox {
border: 4px solid green;
}
6. 嵌套嵌套是 less 中非常有用、高效的语法
//less
#list {
width: 600px;
margin: 30px auto;
list-style: none;
padding: 0;
li {
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
a {
float: left;
// 伪类选择器
&:hover {
font-size:20px;
}
}
span {
float: right;
}
}
}
7.arguments 参数 有时候我们不想单个操作参数，可以使用 @argemunts 操作参数。
//less
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg();
}
//css
.test_arguments {
border: 30px red solid;
}
8. 避免编译有时候我们需要输出一些不正确的 css 语法或者使用一些 less 不认识的专有语法，要输出这样的值我们需要使用~”” 将语法包裹起来，语法放在双引号或者单引号中间。从而实现不让 less 编译该段代码：
