less是css的预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
我举个简单的例子，在less文件中，一个常用的颜色样式，但是这个颜色样式需要不定时更改。在css中，就必须找到选择器再修改颜色。而less中可以把这样的样式变量在文件最上面，在下面直接调用这个变量，如果要修改，直接改这个变量即可。
浏览器能支持less，但是不建议在生产环境使用less，因为生产环境对速度性能要求高，解析less会耗掉一部分性能，在生产环境可以把less解析成css使用。
虽然less文件最后还是会变成css，但是不代表less是多此一举，使用less能大大提高开发效率。
首先介绍less解析软件（网上很多用命令行解析的方法，不觉得很繁琐吗，我推荐使用软件一键解析）：koala 下载地址：http://koala-app.com/
下面介绍less的语法.
1、公共变量和 伪类
@common-color:#fff; //定义公共变量
@hover-color:#000; //定义公共变量
@name:'content';
@content:'大明';
div{
color:@common-color;
&:hover{ //伪类
color:@hover-color;
}
.div-son{ //子元素
content:@@name; //双重调用
}
}
解析成css后：
div{
color:#fff;
}
div:hover{
color:#000;
}
div .div-son{
content:'大明';
}
less中伪类使用 & ,否则一律按子元素处理
2、继承
.public{ //这个样式编译后还会在css文件中显示
color:#fff;
font-size:20px;
}
div{
.public;
width:20px;
}
//这边演示编译后不需显示的例子
.common(){
color:#000;
}
span{
.common;
height:20px;
}
解析成css后
.public{ //这个样式编译后还会在css文件中显示
color:#fff;
font-size:20px;
}
div{
color:#fff;
font-size:20px;
width:20px;
}
span{//这个虽说继承了.common类，但是在.common后面加上了 () 就不在css中显示了
color:#000;
height:20px;
}
上面的代码其实还有很多冗余，less提供了另一种更好的方法 extend
.public {
width:20px;
height:10px;
}
div{
&:extend(.public);//extend继承的第一种写法
color:#fff;
}
span:extend(.public){//extend继承的第二种写法
font-size:20px;
}
<h1>本文为原创文章，转载请注明出处</h1>
<h1>觉得本文对你有帮助</h1>
关注简书前端丶米店，持续分享中。。。
