1.了解
Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。更少可以运行在Node或浏览器端。
2.使用方法
方法一：“袋鼠”工具，下载单独软件先在本地转译，再把生成的.css文件引入；
方法二：使用less的脚本进行实时转译，如下：
<link rel="stylesheet/less" href="styles.less" />
...
<script src="less.js" type="text/javascript"></script>
注意：
1.link中自己写的less的rel=“stylesheet/less”；
2.引入less脚本之前书写.less自书写需转译的less ；方法三：使用npm全局安装less，然后逐步转译less文件
//安装
$ npm install -g less
//解析
$ lessc styles.less
//解析完后保存
$ lessc styles.less > styles.css方法四：在vue中使用less-loader，具体修改如下：
step1：安装 less 和 less-loader ，在项目目录下运行如下命令：
npm install less less-loader --save-dev
step2：webpack.config.js中添加如下代码，对后缀为less的文件进行解析依赖
module: {
rules: [
...
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
]
}
step3：页面中<style>标签中添加 lang="less"
<style scoped lang="less"> ... </style>3.语法
1、变量：其实本质是常量，因为它是不可变的，只允许定义一次。
@val001 : #5B83AD; //变量为：属性值
@val002 : color; //变量为：属性值
@val003 : className; //变量为：类名
@val004 : "../image"; //变量为：url
@val005 : "../../themes"; //变量为：导入半路径
@val006 : "content string";
@val007 : "val006"; //变量为：变量名称
@import "@{val005}/backTheme.less";
div {
@{val002}: @val001;
content: @@val007;
background: url("@{val004}/big/big.png");
}
.@{val003}{
font-size: 10px;
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
div {
color: #5B83AD;
content: "content string";
background:yrl("../image/big/big.png");
}
.className{
font-size:10px;
}2、混入(Mixins)：一组属性在其他样式中出现。
.redColor{ //输出的被混入对象
color:red;
}
.noshow(){ //不输出的被混入对象
padding:10px;
&:hover{ //属性的混入
color:blue;
}
}
.cont{
font-size:16px;
.redColor() !important; //redColor里的所有属性都会带 !important
.noshow; //有木有小括号都是可以的
}
—————————————————————————————————————————————————————————————————————————————————————————
//输出
.redColor{
color:red;
}
//.noshow不会输出
.cont{
font-size:16px;
color:red !important;
padding:10px;
}
.cont:hover{
color:blue;
}
注意：
1.混入时属性混入可以将（）小括号去掉；
2.可以使用类名，id名进行混入；
3.不想要引用的样式输出，可以使用.noshow(){}，加小括号的方式；3、参数混入：可以理解成函数传递参数。
.mixin(@x:10px; @y:10px; @z:10px; @color:#aaa) {
width:@x;
height:@y;
padding:@z;
color:@color;
box-shadom:@arguments;
}
.class1 {
.mixin(@color:#ddd; @x:50px);
}
—————————————————————————————————————————————————————————————————————————————————————————
//输出
.class1 {
width:50px;
height:10px;
padding:10px;
color:#ddd;
box-shadom:10px 10px 10px #ddd;
}
注意：
1.传参可以对参数名称进行规定，如：@color
2.传参可以设定默认的数值，如：@clor:#aaa
3.传递参数可以是多个，如：@x:10px; @y:10px; @z:10px; @color:#aaa
4.传参定义了名称，其传递的实际参数顺序无所谓，如：@color:#ddd; @x:50px
5.@arguments类似一个伪数组，可以直接使用，如：box-shadom:@arguments
//特殊：混入作为函数
.mixin2(@x;@y){
@wid:@x;
@hei:@y;
}
.class2{
.maxin2(10px,20px);
width:@wid;
height:@hei;
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
.class2 {
width:10px;
height:10px;
}
注意：
1.混入可作为函数，进行调用，然后返回对应的变量再赋值，如：.maxin2(10px,20px);width:@wid;//特殊：条件混入
.mixin (@a) when (@a >= 50%) {
background-color: black;
}
.mixin (@a) when (@a < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
——————————————————————————————————————————————————————————————————————————————————————————
//输出
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}//特殊：循环在混入中的使用
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出：
.column-1 { width: 25%; }
.column-2 { width: 50%; }
.column-3 { width: 75%; }
.column-4 { width: 100%; }4、嵌套：有父子关系的写在一起，接近于html的写法。
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}5、运算：利用+ - * / 进行计算得出最后的值并附上单位，常用的是宽高，百分比，颜色值
@val001:5px+10; 15px
@val002:5px+10px; 15px
@val003:5px+10cm; 15px
@val004:5%*2; 10%
注意：
1.计算中出现多单位，单位以最左边单位为最终结果；
2.计算中最好将单位标清楚，方便修改和设定；6、格式化：使用“ ~ ”符号，允许任意字符串作为属性或属性值，并以原样返回
.weird-element {
content: ~"^//* some horrible but needed css hack";
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
.weird-element {
content: ^//* some horrible but needed css hack;
}7、功能：可以转换颜色，操纵字符串和进行数学运算(使用较少，但在效果变更还是很实用的)
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%` //将0.5％转换为50％
color: saturate(@base, 5%); //将基色的饱和度增加5％
background-color: spin(lighten(@base, 25%), 8); //将背景颜色设置为减轻25％并旋转8度的颜色
}8、范围作用域：类似js中局部和全局的感觉，不一样的是局部的变量可以在后边定义
@var: red;
#page {
#header {
color: @var; //white
}
@var: white; //引用后边定义变量
}9、导入：导入外部的样式，可以是less或者css等
@import "foo"; foo.less
@import "foo.less"; foo.less
@import "foo.php"; foo.less
@import "foo.css"; foo.css
@import (optional, reference) "foo.less"; //指令控制导入文件
注意：
1.导入的语句写在哪里都无所谓，但是建议写在最顶端；
2.根据文件扩展名，有如下规范：
（1）如果文件有.css扩展名，则将其视为CSS，并将@import语句保留为原样；
（2）如果它有任何其他扩展名，它将被视为less并导入；
（3）如果它没有扩展名，以扩展名.less进行导入；
3.@import (keyword) "文件名称";这才是最全的导入语法，其中【keyword】代表指令，可进行一些导入
文件的控制，并支持多指令控制且用逗号分开，可选指令如下：
reference： 使用Less文件但不输出
inline： 在输出中包含源文件但不处理它
less： 无论文件扩展名是什么，都将文件视为Less文件
css： 无论文件扩展名是什么，都将文件视为CSS文件
once： 只包含一次文件（默认就是包含一次）
multiple： 多次包含该文件
optional： 找不到文件时继续编译（默认找不到就停止编译了）4.常用内置函数
//字符串
替换：replace(字符串,要替换的文本,替换成文本,正则标志);
replace("One + one = 4", "one", "2", "gi"); //2+2=4
//列表
长度：length(list的变量名称);
@listall:1,2,3,4;
n: length(@listall); //n: 4
提取：extract(list的变量名称,下标数字);
val: extract(@listall,2) //val: 3
//数字
取整：ceil(小数) 向上取整
floor(小数) 向下取整
round(小数,小数位数) 四舍五入（并保留几位小数）