一、 less是什么
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
注意1）：less使用.less作为文件后缀。通过第三方工具，可以一键或者实时编译成对应的css文件。也就是说：实际项目中，我们编辑的是.less文件，但引用时依旧像往常一样引用.css文件。通过第三方工具（例如Koala），可以实现.less文件一发生改变，就生成同名的.css文件。
注意2）：LESS的基础语法基本上分为以下几个方面：变量、混合(Mixins)、嵌套规则、运算、函数、作用域等。
例子如下：
1）.less文件显示：
@base: #f938ab;/*定义变量*/
.box {
color: @base;
/*使用函数*/
border-color: lighten(@base, %);
/*嵌套*/
&-content{
width:%;
}
.title{
color:#ccc;
}
}
通过第三方工具（例如Koala），翻译成的css样式如下：
2）.css文件显示：
.box {
color: #f938ab;
border-color: #fdcdea;
}
.box-content {
width: %;
}
.box .title {
color: #ccc;
}
二、less的语言特性
1、变量
注意，由于变量只能定义一次，其本质就是“常量”；
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #; #header {
color: @light-blue;
}
编译为：
#header {
color: #6c94be;
}
变量代换 ：如选择器名称，属性名称，URL和@import
1）：选择器
@mySelector: banner;
.@{mySelector} {
font-weight: bold;
line-height: 40px;
margin: auto;
编译为：
.banner {
font-weight: bold;
line-height: 40px;
margin: auto;
}
2）：网址
@images: "../img"; // 用法
body {
color: #;
background: url("@{images}/white-sand.png");
}
3）：import语句： @import "@{themes}/tidal-wave.less";
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>LESS Variables in Import Statements</title>
</head>
<body>
<div class="myclass">
<h2>Welcome to Yiibai Yiibai</h2>
<p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</body>
</html>
@path : "http://www.yiibai.com/less";
@import "@{path}/external1.less";
.myclass{
color : #A52A2A;
}
external1.less
.myclass{
background: #C0C0C0;
}
lessc style.less style.css
style.css
body {
background: #C0C0C0;
}
p {
color: #A52A2A;
}
输出的结果如下：
- 保存上述的HTML代码在 less_variables_interpolation_import.html 文件。
- 在浏览器中打开该HTML文件，得到如下输出显示。
4）属性
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #;
}
编译后：
.widget {
color: #0ee;
background-color: #;
}
5）变量名：可以用一个变量名定义变量
@fnord: "I am fnord.";
@var: "fnord";
content: @@var;
编译后：
content: "I am fnord.";
2、混合（Mixin）：混合是包括从一个规则集到另一个规则集（“在混合”），一堆属性的一种方式。
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
我们要使用内的其他规则集这些属性。好了，我们只是在我们想要的属性，像这样的类名下降：
#menu a {
color: #;
.bordered;
}
.post a {
color: red;
.bordered;
}
属性.bordered类现在会出现在两个#menu a和.post a。（请注意，您也可以使用#ids如混入。）
1）带参数的mixin :混合也可以使用参数，这是变量传递给选择块
例子：
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
下面是能组合成的不同的规则集：
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
2）参数混合也可以有默认值的参数：
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
我们可以调用它的默认值：
#header {
.border-radius;
}
//输出：它将包括为5px边界半径。
3）也可以使用不带参数的参数混入。
.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;
}
4）混合多参数：参数或者是分号或逗号分隔。建议使用分号。
- 两个参数，每一个包含逗号分隔的列表：
.name(1, 2, 3; something, else)， - 三个参数，每个包含一个数字：
.name(1, 2, 3)， - 使用虚拟分号创建混入调用一个参数包含逗号分隔的CSS列表：
.name(1, 2, 3;)， - 逗号分隔的默认值：
.name(@param1: red, blue;)。
.mixin(@color) {
color-: @color;
}
.mixin(@color; @padding:) {
color-: @color;
padding-: @padding;
}
.mixin(@color; @padding; @margin: ) {
color-: @color;
padding-: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#);
}
编译后：
.some .selector div {
color-: #;
color-: #;
padding-: ;
}
5）命名参数：任何参数都可以通过其名称来引用，它们不必是任何特殊的顺序
.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;
}
6）@arguments变量：@arguments有内混入特殊的意义，它包含传递的所有参数
.box-shadow(@x: ; @y: ; @blur: 1px; @color: #) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block {
.box-shadow(2px; 5px);
}
编译后：
.big-block {
-webkit-box-shadow: 2px 5px 1px #;
-moz-box-shadow: 2px 5px 1px #;
box-shadow: 2px 5px 1px #;
}
3、嵌套规则
例子如下：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
可以进行嵌套成如下的写法：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
由此产生的代码更简洁，模仿你的HTML的结构。
也可以捆绑伪元素使用这种方法，改写为一个mixin（&表示当前选择的父）：
.clearfix {
display: block;
zoom: ;
//捆绑伪元素
&:after {
content: " ";
display: block;
font-size: ;
height: ;
clear: both;
visibility: hidden;
}
}
4、运算：任何数字、颜色或者变量都可以参与运算。
例子1：
@base: %;
@filler: @base * ;
@other: @base + @filler; color: # / ;
background-color: @base - color + #;
height: % / + @filler; 例子2：
@var: 1px + 5;
//最终输出是6px
5、函数：Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
例子：如何将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等：
@base: #f04615;
@width: 0.5; .class {
width: percentage(@width); // returns `50%`
color: saturate(@base, %);
background-color: spin(lighten(@base, %), );
}
编译为：
.class {
width: %;
color: #f6430f;
background-color: #f8b38d;
}
1）作为函数使用的Mixin
例子1：
.mixin() {
@width: %;
@height: 200px;
}
.caller {
.mixin();
width: @width;
height: @height;
}
编译后：
.caller {
width: %;
height: 200px;
}
例子2：
.average(@x, @y) {
@average: ((@x + @y) / );
}
div {
.average(16px, 50px);
padding: @average;
}
编译后：
div {
padding: 33px;
}
2）Mixin Guards的用法：常用的条件运算符：>、>=、<、<=、=；我们设定的条件还可以使用IS函数：iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...
//->LESS代码
.mixin (@a) when (lightness(@a) >= %) {
background-color: black;
} .mixin (@a) when (lightness(@a) < %) {
background-color: white;
} .box1{
.mixin(#ddd);
} .box2{
.mixin(#);
} //->编译为CSS的结果
.box1 {
background-color: black;
} .box2 {
when是在设置条件，除了像上面的写法外，我们还可以通过when设置多个条件，而且条件中可以使用is函数。
//->LESS代码:使用IS函数
.mixin (@a; @b: ) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... } //->LESS代码:多条件，可以使用and或者逗号间隔
.mixin (@a) when (isnumber(@a)) and (@a > ) { ... }
我们还可以通过与&特性结合实现'if'类型的语句。
//->LESS代码:这里的意思是如果为true,.box的文字颜色才是白色
@my-option: true;
& when (@my-option = true) {
.box {
color: white;
}
3)Loops ，当一个混合递归调用自己，再结合Guard条件表达式，就可以写出循环结构。使用递归循环最常见的情况就是生成栅格系统的CSS：
//->LESS代码
.generate-columns();
.generate-columns(@n, @i: ) when (@i <= @n) {
.column-@{i} {
width: (@i * % / @n);
}
.generate-columns(@n, (@i + ));
} //->输出的CSS
.column- {
width: %;
} .column- {
width: %;
} .column- {
width: %;
} .column- {
4）Merge ：Merge特性可以从多个属性中将值，集合到某一个样式属性的列表中（也就是多样式效果）。在编写的时候，+代表以逗号分隔，+_代表多个之前以空格分隔。
//->LESS代码
.mixin() {
box-shadow+: inset 10px #;
} .myclass {
.mixin;
box-shadow+: 20px black;
} .mixin2() {
transform+_: scale();
} .myclass2 {
.mixin2;
transform+_: rotate(45deg);
} //->输出的CSS
.myclass {
box-shadow: inset 10px #, 20px black;
} .myclass2 {
6、命名空间和访问器
有时候，你可能为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，一些属性集之后可以重复使用。
例子：
/*模块*/
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab { /**/ }
.citation { /**/ }
} /*下面复用上面的一部分代码*/
#header a {
color: orange;
#bundle > .button;
}
编译生成：
#bundle .button {
display: block;
border: 1px solid black;
background-color: grey;
}
#bundle .button:hover {
background-color: white;
}
#bundle .tab {
/**/
}
#bundle .citation {
/**/
}
/*下面复用上面的一部分代码*/
#header a {
color: orange;
display: block;
border: 1px solid black;
background-color: grey;
}
#header a:hover {
background-color: white;
}
LESS中的命名空间，属于高级语法，在日常项目中应用比较广泛。我们可以用LESS中的命名空间为自己封装一些日常比较常用的类名，以便以后做项目的时候更有效率。
7、作用域
子类里面的优先，找不到才往父类里找。
例子：
@var: red;
#page {
@var: white;
#header {
color: @var; // 这里值是white
}
}
也不会因为变量后面定义而影响作用域：
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
和上面的例子是一样的。
8、注释
css仅支持块注释。less里块注释和行注释都可以使用：
/* 一个注释块
style comment! */
@var: red; // 这一行被注释掉了！
@var: white;
9、导入 和css一样，你可以导入一个.less文件，此文件中的所有变量就可以全部使用了。如果导入的文件是.less扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";
1）Import Directives ：从其他样式表中导入样式。
//->LESS代码
@import "public.less"; .box {
&:after {
.clear;
}
} //->输出的CSS:会把public中的样式也输出
.clear {
display: block;
height: ;
content: "";
clear: both;
zoom: ;
} .box:after {
display: block;
height: ;
content: "";
clear: both;
zoom: ;
}
我们发现上述的操作虽然实现了调取使用，但是会把public中的less也编译到了自己的这个css中，如果不想编译的话，我们需要配置一些参数：
//->LESS代码
@import (reference) "public.less"; .box {
&:after {
.clear;
}
} //->输出的CSS:
.box:after {
display: block;
height: ;
content: "";
clear: both;
zoom: ;
}
除了reference以外我们还可以配置一些其他的参数值： inline：在输出中包含源文件但不加工它 less：将文件作为Less文件对象，无论是什么文件扩展名 css：将文件作为CSS文件对象，无论是什么文件扩展名 once：只包含文件一次（默认行为） multiple：包含文件多次
具体参考：http://lesscss.cn/