Less是什么
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
less使用.less作为文件后缀。通过第三方工具，可以一键或者实时编译成对应的css文件。
变量
使用@符号定义。例如：
@base: #f938ab;
.box {
color: @base; /*变量引用*/
}
变量的作用就是把值定义在一个地方（或一个文件里，通过@import导入），然后在各处使用，这样能让代码更易维护。
什么时候引用时@后需加{ }
选择器 url import语句里 属性 （除了常规变量名）
变量也支持URLs：
// Variables
@images: "../img";
// 用法
body {
color: #444;
background: url("@{images}/white-sand.png");
}
属性也支持变量的形式：
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
混合（Mixin）
混合就是前面定义的一个样式，后文可以直接引用。示例：
@base: #f938ab;
.ellipsis_txt {
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.box {
color: @base;
.ellipsis_txt;
/*或者.ellipsis_txt();*/
}
括号是可选的。
嵌套
可以在一个css里有多个css块，以方便我们更好的组织代码，编写css模板。
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
生成：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
还支持&符号：
#header {
color: black;
&-navigation {
font-size: 12px;
}
&-logo {
width: 300px;
}
&:hover{
color:#ccc;
}
}
生成：
#header {
color: black;
}
#header-navigation {
font-size: 12px;
}
#header-logo {
width: 300px;
}
#header:hover {
color: #ccc;
}
运算
任何数字、颜色或者变量都可以参与运算。下面是一组案例：
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
示例：
@var: 1px + 5;
div{
width:@var;
}
输出：
div {
width: 6px;
}
less的计算方式跟calc方法有重叠，两者在一起有冲突，
可以在Less中把calc的写法改写成下面这样：
width : calc(~”100% - 30px”)；
函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在函数手册中有详细介绍。
函数的用法非常简单。下面这个例子将介绍如何将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
编译生成：
.class {
width: 50%;
color: #f6430f;
background-color: #f8b38d;
}
命名空间
有时候，你可能为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，一些属性集之后可以重复使用。
/*打包模板*/
.trsn(@s) {
-webkit-transition: @s all ease;
-moz-transition: @s all ease;
transition: @s all ease;
}
.trsf(@attr) {
transform: @attr;
-webkit-transform: @attr;
-moz-transform: @attr;
/*反复使用*/
.demo1{
.trsn(.2s);
.trsf(translateY(-30px));
}
.demo2{
.trsn(.5s);
.trsf(translateX(60px));
}
LESS中的命名空间，属于高级语法，在日常项目中应用比较广泛。我们可以用LESS中的命名空间为自己封装一些日常比较常用的类名，以便以后做项目的时候更有效率。
作用域
子类里面的优先，找不到才往父类里找。
示例：
@var: red;
#page {
@var: white;
#header {
color: @var; // 这里值是white
}
}
也不会因为变量后面定义而影响作用域（具有变量提升）：
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
和上面的例子是一样的。
注释
css仅支持块注释。less里块注释和行注释都可以使用：
/* 一个注释块
style comment! */
@var: red;
// 这一行被注释掉了！
@var: white;
导入
和css一样，你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";
