Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。 因为 Less 和 CSS 非常像，学习很容易。而且 Less 仅对 C... ......
less是一门css预处理语言，它扩展了css语言，增加了变量，mixin，函数等特性，使css更易维护和扩展。
更少可以运行在node或浏览器端。
例子：
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
输出：
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
安装
在服务器上安装less的最简单方法是通过npm，包管理器，如下所示：
$ npm install -g less
命令行用法
安装后，您可以从命令行调用编译器，如下所示：
$ lessc styles.less
这将输出编译的css stdout。要将css结果保存到您选择的文件，请使用：
$ lessc styles.less styles.css
要输出缩小，您可以使用css 。安装插件后，使用--clean-css选项指定缩小的css输出：
$ lessc --clean-css styles.less styles.min.css
要查看所有lessc不带参数的命令行选项，请参阅。
代码用法
您可以从节点调用编译器，如下所示：
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, output) {
console.log(output.css);
});
哪个会输出
.class {
width: 2;
}
配置
您可以将一些选项传递给编译器：
var less = require('less');
less.render('.class { width: (1 + 1) }',
{
paths: ['.', './lib'], // specify search paths for @import directives
filename: 'style.less', // specify a filename, for better error messages
compress: true // minify css output
},
function (e, output) {
console.log(output.css);
});
有关更多信息，请参阅
浏览器端用法
在浏览器中使用less.js非常适合开发，但不建议用于生产
客户端是最简单的入门方式，适合用less开发，但在生产中，当性能和可靠性很重要时，我们建议使用node.js或许多第三方工具之一进行预编译。
首先，将.less样式表链接到rel设置为“ stylesheet/less” 的属性：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
接下来，并将其包含在页面元素的<script></script>标记中<head>：
<script src="less.js" type="text/javascript"></script>
提示
-
确保在脚本之前包含样式表。
-
当您链接多个
.less样式表时，每个样式表都是独立编译的。因此，您在样式表中定义的任何变量，混合或名称空间都无法访问。
-
由于浏览器加载外部资源的原始策略相同，因此需要启用cors
选项
通过在以下位置之前在全局less对象上设置选项来定义选项：<script src="less.js"></script>
<!-- set options before less.js script -->
<script>
less = {
env: "development",
async: false,
fileasync: false,
poll: 1000,
functions: {},
dumplinenumbers: "comments",
relativeurls: false,
rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>
或者为了简洁起见，可以将它们设置为脚本和链接标记上的属性（需要json.parse浏览器支持或polyfill）。
<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">
下载
下载less.js v2.5.3
通过直接从github下载获取最新的less.js源代码。
分叉项目并向我们发送拉取请求！
通过在命令行中运行以下命令来安装less.js项目和javascript：
bower install less
cdn
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
less 的语法：
1嵌套语法
嵌套规则
less使您能够使用嵌套代替或与级联结合使用。假设我们有以下css：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
在less中，我们也可以这样写：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
生成的代码更简洁，并模仿html的结构。
您还可以使用此方法将伪选择器与mixin捆绑在一起。这是经典的clearfix hack，重写为mixin（&代表当前的选择器父级）：
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
2 注释语法;
使用 // 或 /* 包裹注释*/
// 打包后将看不到，包裹注释，打包后依然可以看到
3变量语法：
//这些都是不言自明的：
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
//输出：
#header {
color: #6c94be;
}
4 作用域语法：
less中的scope与编程语言非常相似。首先在本地查找变量和mixin，如果找不到它们，编译器将查找父作用域，依此类推。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
变量和mixin在使用之前不必声明，因此以下less代码与前面的示例相同：
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
5 混合语法
混合
mixins是一种将一组属性从一个规则集包含（“混入”）到另一个规则集中的方法。所以说我们有以下课程：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
我们希望在其他规则集中使用这些属性。好吧，我们只需要删除我们想要属性的类的名称，如下所示：
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
.bordered该类的属性现在将出现在#menu a和.post a。（请注意，您也可以#ids用作mixins。）
另外 mixins也可以接受参数，这些参数是混合在一起时传递给选择器块的变量。
例如：
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
以下是我们如何将其混合到各种规则集中：
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
参数mixin也可以为其参数设置默认值：
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
我们现在可以像这样调用它：
#header {
.border-radius;
}
它将包括5px边界半径。
您还可以使用不带参数的参数化mixins。如果要从css输出中隐藏规则集，但希望在其他规则集中包含其属性，这非常有用：
.wrap() {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
哪个输出：
pre {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
具有多个参数的混合
参数可以是分号或逗号分隔。建议使用分号。符号逗号具有双重含义：它可以解释为mixin参数分隔符或css列表分隔符。
使用逗号作为mixin分隔符使得无法将逗号分隔列表创建为参数。另一方面，如果编译器在mixin调用或声明中看到至少一个分号，则它假定参数由分号分隔，并且所有逗号都属于css列表：
两个参数，每一个包含逗号分隔的列表：.name(1, 2, 3; something, else)，
三个参数，每个包含一个数字：.name(1, 2, 3)，
使用dummy分号创建mixin调用，其中一个参数包含逗号分隔的css list : .name(1, 2, 3;),
逗号分隔的默认值：.name(@param1: red, blue;)。
定义具有相同名称和参数数量的多个mixin是合法的。less将使用所有可应用的属性。如果您使用带有一个参数的mixin .mixin(green);，那么将使用具有一个强制参数的所有mixin的属性：
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding: 2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}
编译成：
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2: 2;
}
命名参数
mixin参考可以通过其名称而不仅仅是位置来提供参数值。任何参数都可以通过其名称引用，并且它们不必具有任何特殊顺序：
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
编译成：
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}
5 混合作为函数引入
mixins作为函数
从mixin返回变量或mixins
mixin中定义的变量和mixin是可见的，可以在调用者的范围内使用。只有一个例外，如果调用者包含一个具有相同名称的变量（包括由另一个mixin调用定义的变量），则不会复制变量。只有受调用者本地范围中存在的变量才受到保护。从父作用域继承的变量将被重写。
例：
.mixin() {
@width: 100%;
@height: 200px;
}
.caller {
.mixin();
width: @width;
height: @height;
}
结果是：
.caller {
width: 100%;
height: 200px;
}
因此，mixin中定义的变量可以作为其返回值。这允许我们创建一个几乎可以像函数一样使用的mixin。
例：
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // "call" the mixin
padding: @average; // use its "return" value
}
结果是：
div {
padding: 33px;
}
直接在调用者范围中定义的变量不能被覆盖。但是，调用者父作用域中定义的变量不受保护，将被覆盖：
.mixin() {
@size: in-mixin;
@definedonlyinmixin: in-mixin;
}
.class {
margin: @size @definedonlyinmixin;
.mixin();
}
@size: globaly-defined-value; // callers parent scope - no protection
结果是：
.class {
margin: in-mixin in-mixin;
}
最后，mixin中定义的mixin也作为返回值：
.unlock(@value) { // outer mixin
.dosomething() { // nested mixin
declaration: @value;
}
}
#namespace {
.unlock(5); // unlock dosomething mixin
.dosomething(); //nested mixin was copied here and is usable
}
结果是：
#namespace {
declaration: 5;
}
导入（importing）
“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";
除此之外，还可以学习其他的样式语音 :sass、scss