1、官方介绍
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
Less是一门动态CSS语言，使得CSS样式更加灵活地作用于Html标签。试想如果没有Less，我们要对样式做一些逻辑计算的时候只能依靠Js去实现，有了Less之后，可以方便地动态给Html标签设置样式。比如一个最常见的需求，在当前浏览器的宽度小于500px的时候，给某一个div设置一个样式，使用less+css3就能很简单的解决问题。当然，这只是其中一个场景，less里面还能进行一些常见的条件和逻辑判断。总的来说，Less赋予了CSS逻辑运算的能力。
除此之外，动态CSS语法还有一个重要的作用就是提高样式代码的可维护性。比如一个最简单的，我们可以定义一个全局的颜色变量@aaa:#222，系统里面所有的默认颜色用的@aaa来写的，这个时候如果需要修改这个全局颜色，我们只需要改下@aaa变量的值就好了，其他地方不用做任何修改，这点，作为编程人员应该很容易理解。
一般来说，客户端运行Less分为两种情况：
第一种方式是直接在html页面引用.less文件，然后借助less.js去编译less文件动态生成css样式而存在于当前页面，这种方式适用于开发模式。
第二种方式是我们首先写好.less文件的语法，然后借助工具生成对应的.css文件，然后客户端直接引用.css文件即可。比如我们常用的bootstrap.css就是通过工具编译而成，这种方式更适合运行环境。
需要说明的是（1）Less里面的变量都是以@作为变量的起始标识，变量名由字母、数字、_和-组成；（2）在一个文件里面定义的同名变量存在全局变量和局部变量的区别
嵌套规则
在CSS里面，我们也经常可以见到标签样式嵌套的写法，那么在Less里面它是怎么实现的呢？我们来下下面的Less代码
#div1 {
h1 {
font-size: 26px;
font-weight: bold;
}
span {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px;
}
}
}
}
不得不说的import指令
less里面使用import将外部的less引入到本地less文件里面来。比如A.less里面定义了一个变量@aaa:red，而B.less文件里面也需要使用@aaa这个变量，这个时候怎么办呢？import派上用场了。
A.less内容如下：
@aaa:red;
B.less内容如下：
@import 'A.less';
div{
color:@aaa;
}
然后再html页面引入B.less文件，编译最终可以得到如下结果
div{
color:@aaa;
}
另外，import指令还包含了多种参数类型：
1. @import (reference) "文件路径"; 将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。
2. @import (inline) "文件路径"; 用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。
3. @import (less) "文件路径"; 默认使用该配置项，表示引入的文件为less文件。
4. @import (css) "文件路径"; 表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件
5. @import (once) "文件路径"; 默认使用该配置项，表示对同一个资源仅引入一次。
6. @import (multiple) "文件路径"; 表示对同一资源可引入多次。
综合实例
对于上文提到的屏幕变化的时候动态去设置样式的问题，使用less结合css3的@media就能轻松处理，比如有下面一段less代码：
@base: #f938ab;
div{
background-color:@base;
padding:50px;
}
.divcolor {
@media (max-width: 400px) {
background-color: green;
}
@media (min-width: 400px) and (max-width: 800px) {
background-color: red;
}
@media (min-width: 800px) {
background-color: #f938ab;
}
}
界面html如下：
<body>
<div id="div1" class="divcolor">div1</div>
<div id="div2">div2</div>
</body>
使用这种嵌套的写法就能实现多个条件的预设样式，所以最终编译得到的css如下：
/* line 4, http://localhost:34512/Content/less.less */
div {
background-color: #f938ab;
padding: 50px;
}
@media (max-width: 400px) {
.divcolor {
background-color: green;
}
}
@media (min-width: 400px) and (max-width: 800px) {
.divcolor {
background-color: red;
}
}
@media (min-width: 800px) {
.divcolor {
background-color: #f938ab;
}
}
表示当前文档的宽度小于400的时候，背景色为green；大于400小于800时背景色为red；大约800时背景色为#f938ab
1245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
