说到less，我们首先肯定会想到css或者scss。那抛开scss，就单独谈谈为什么选择了less，而非css，他们的区别又有那么些呢？
- Less是一门CSS预处理语言，css是一种用来表现HTML或XML等文件样式的计算机语言。
- less扩展了CSS语言，增加了变量、Mixin、函数、运算、继承、嵌套等特性。
- css可以被浏览器直接识别，less需要先编译为css。
使用方法
说白了就是less可以看做是一个工具，让你操作css更方便的工具。既然是工具，在使用它之前肯定就要去“安装”这个工具。less官方也提供了几种“使用工具”的方法：
node环境中使用
通过npm的安装方式全局安装或者项目目录安装
npm install less -g
浏览器中使用
通过引入less.js的方法，然后在浏览器中可以自动编译你的.less文件
首先，将.less样式表的rel属性设置为“ stylesheet/less”：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
接下来，下载less.js，并将其包含在页面元素中的<script></script>标记中<head>：
<script src="less.js" type="text/javascript"></script>
当然你也可以配置一些设定选项，这个可以转移到官网查看详情配置，这里就不过多赘述。
使用工具/插件装换格式
我用过比较好的一个工具是Koala（考拉），koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。可以直接把less文件装换成css文件，快速方便可配置。
当然有的开发工具也带有转换less为css文件的插件，比如Hbuilder X前端开发工具，安装less转换插件即可，可右键直接生成css文件
常用操作及技巧
当然，前面说的这么多不是今天的重点，重点是下面的一些关于less常用的操作及技巧。
变量（@）
通过@符号定义变量并且使用。
@color:#4078cb;
.home {
background-color:@color;
}
编辑后：
.home {
background-color:#4078cb;
}
变量也可以用在如：选择器名称，属性名称等
@my-selector: banner;
@images: "../img";
.@{my-selector} {
font-weight: bold;
background: url("@{images}/white-sand.png");
}
编译后：
.banner {
font-weight: bold;
background: url("../img/white-sand.png");
}
变量运算
变量可以进行加减乘除运算，加减法时，以第一个数据的单位为基准，乘除法是，单位要统一。
@width:300px;
@color:#222;
@fontSize:14px;
.top{
width:@width - 20;
height:@width - 20*5;
color:@color*2;
background-color:@color + #111;
font-size: @fontSize*2;
}
编译后：
.top {
width: 280px;
height: 200px;
color: #444444;
background-color: #333333;
font-size: 28px;
}
注意：加减运算时要注意符号左右两侧留空格，否则可能会有报错的风险。
嵌套及连接符（&）
父母选择器可用过嵌套的方式实现
div {
width:100px;
a {
color:#4078cb;
}
}
编译后：
div {
width:100px;}
div a {
color:#4078cb;}
&操作符可实现伪类选择器、连接等操作
a {
&:hover {
color: green;
}
}
编译后：
a:hover {
color
最低0.47元/天 解锁文章
5937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
