快速入门CSS预处理器之less
我们就以vscode为例子，如果你还没有使用vscode的话，建议使用vscode，免费而且插件非常之多，用起来很方便，话不多说开始吧!
首先: (1) 下载安装node.js，官网下载： https://nodejs.org/zh-cn/ (2) 按 Win+R 输入 CMD (3) 输入npm install -g less 回车，等待安装完毕即可
做完上面的步骤后就可以开始下面的步骤了 先在扩展里面找一个easy LESS进行安装，它会帮你自动编译，点击一下安装就可以了 然后点击 文件 => 首选项 => 设置 => 输入easy => 在setting.json中编辑，在大括号内加入下面内容：
"less.compile": { "compress": false, "sourceMap": false, "out": "../css/", // less 放在less文件夹下，less文件夹和css文件夹同级， }图片如下:（关注圈起来的那部分就行了）
变量:
通过@变量名: 属性来定义一个属性，然后在其它属性中可以调用这个变量名来使用该属性,如
@borderColor: red;那么在其他地方需要使用红色这个元素时就可以通过调用@borderColor变量来使用红色，
border: 1px solid @borderColor;先看图 html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/01.css"> <title>Document</title> </head> <body> <h1>test less</h1> <ul> <li>1内容</li> <li>2内容</li> <li>3内容</li> </ul> </body> </html>less文件
body { background-color: antiquewhite; color: yellow; font-size: 20px; } //单行注释 /* 多行注释 */ @borderColor: red; @bgImgURL: "../assets/img"; ul { background: url("@{bgImgURL}/bg.jpg") no-repeat; } li { border: 1px solid @borderColor; }less编译后的css文件 可以看到设置后的单行注释没有编译到css文件中
body { background-color: antiquewhite; color: yellow; font-size: 20px; } /* 多行注释 */ ul { background: url("../assets/img/bg.jpg") no-repeat; } li { border: 1px solid red; }效果 注意点：
在使用变量定义字符串进行拼接时记得要注意用{}把变量名圈起来 如该例子中的设置背景
@bgImgURL: "../assets/img"; ul { background: url("@{bgImgURL}/bg.jpg") no-repeat; }还有变量名虽然可以随意设置但是别用中文命名，还可以直接在属性设置是进行加减乘除，比如@w100=100px,在后续中其他需要使用这个时可以直接设置属性为@w-test = @w100 + 50px,这时候你设置的这个@w-test属性值就为150px了，注意在+左右留一个空格，如果是两个变量相加的后可以忽略这个空格。
先解释一下上面的less，你可以把.error(){}当成一个函数，但是要注意前面还有一个点 error是你设置的名字,你可以在设置时给属性设置默认值，在其他属性需要使用这些属性时可以直接使用.error()，当然你可以传入你需要改变的值，那么给出编译后的css文件就一目了然了 less编译后的css文件
.title { color: red; font-size: 14px; } .content { color: orange; font-size: 20px; }还是老样子，直接上less图再解释
.sjx(@_,@color,@size){ width: 0; height: 0; border: @size solid @color; border-color: transparent; } .sjx(left,@color,@size){ border-left-color: @color; } .sjx(right,@color,@size){ border-right-color: @color; } .sjx(top,@color,@size){ border-top-color: @color; } .sjx(bottom,@color,@size){ border-bottom-color: @color; } .triangle { .sjx(bottom,orange,50px) /*.sjx(bottom,20px,@color:orange)*/ }附上解释: .sjx(){}这个是不是跟上面的混入很熟悉，没错，一样的写法，那么开始解释它里面形参:
@_时公共匹配的模块,其它left,right,top,bottom都是你自己随便定义的名字，那么当你需要使用里面的属性时，你只需跟混入一样调用即可，如上面我调用的时bottom的这个模块，那么它就会用bottom里面的属性合并上公共模块的属性，就组成了上面.triangle里面的元素 less编译后的css文件
.triangle { width: 0; height: 0; border: 50px solid orange; border-color: transparent; border-bottom-color: orange; }还有博主上面那个注释的设置效果跟上面的效果是一样的
上面的DOM树是不是body包裹着ul，然后ul里面包裹着一堆li，好了，那么可以看less文件了 less文件
ul { list-style: none; li:nth-of-type(1){ background-color: red; } li:nth-of-type(2){ background-color: darken(#ff0000,10%); } li:nth-of-type(3){ background-color: darken(#ff0000,20%); } li:nth-of-type(4){ background-color: darken(#ff0000,30%); } li:nth-of-type(5){ background-color: darken(#ff0000,40%); } li:nth-of-type(6){ background-color: darken(#ff0000,50%); } li:nth-of-type(7){ background-color: mix(#ff0000,#0000ff); } li:nth-of-type(8){ background-color: saturate(#ee8787,50%) } li:nth-of-type(9){ background-color: spin(#ff0000,30); } }欸，是不是可以看出什么来，那么我们先去掉里面的元素，当初看结构就可以一目了然了
ul { li {} li {} ... li {} }现在可以看出来了吧，它的使用就跟我们刚刚说的DOM树的层级关系一样的，那么看他编译后的CSS文件
ul { list-style: none; } ul li:nth-of-type(1) { background-color: red; } ul li:nth-of-type(2) { background-color: #cc0000; } ul li:nth-of-type(3) { background-color: #990000; } ul li:nth-of-type(4) { background-color: #660000; } ul li:nth-of-type(5) { background-color: #330000; } ul li:nth-of-type(6) { background-color: #000000; } ul li:nth-of-type(7) { background-color: #800080; } ul li:nth-of-type(8) { background-color: #ff7676; } ul li:nth-of-type(9) { background-color: #ff8000; }可以看出，它编译后的css文件自动把DOM树的层级关系加了上去,还有当你需要li:hover的时候
错的写法: li { :hover { } } 正确的写法 li { &:hover { //&相当于父元素 } } 当然你也可以这样 li { } li:hover { } lighten(@color,10%) 比@color亮 10%的颜色 darken(@color,10%) 比@color暗10%的颜色 saturate(@color,10%) 比@color饱和 10%的颜色，你可以理解为香艳的意思 desaturate(@color,10%) 与上面相反 spin(@color,10) 色相值+10 spin(@color,-10) 色相值-10 色相就是假如各种颜色组成一个轮盘，你加上一个值，你就相当于在轮盘上旋转一定角度后，这时所指向的颜色 mix(@color,@color) 混合这个两种颜色效果图如下:
直接给代码，一目了然： less代码如下:
.test { color: red; } .test-extend:extend(.test){ font-size: 14px; }css代码如下:
sky-test { border-color: red; } .test, .test-extend { color: red; } .test-extend { font-size: 14px; }可以看出，继承.test后会，.test-extend复刻一份.test里面的所有属性
