学习目标：

快速入门CSS预处理器之less

安装

我们就以vscode为例子，如果你还没有使用vscode的话，建议使用vscode，免费而且插件非常之多，用起来很方便，话不多说开始吧!

首先:
(1) 下载安装node.js，官网下载： https://nodejs.org/zh-cn/ (2) 按 Win+R 输入 CMD
(3) 输入npm install -g less 回车，等待安装完毕即可

做完上面的步骤后就可以开始下面的步骤了

先在扩展里面找一个easy LESS进行安装，它会帮你自动编译，点击一下安装就可以了

vscode 使用什么插件能够过less格式化_html


然后点击 文件 => 首选项 => 设置 => 输入easy => 在setting.json中编辑，在大括号内加入下面内容：

"less.compile": {
        "compress": false,
        "sourceMap": false,
        "out": "../css/", // less 放在less文件夹下，less文件夹和css文件夹同级，
    }

图片如下:（关注圈起来的那部分就行了）

vscode 使用什么插件能够过less格式化_less_02


在.less里面点击保存后会他自动生成.css文件在刚刚指定的上面out属性的路径里

那么开始介绍less的使用吧!

基本语法：

变量:

通过@变量名: 属性来定义一个属性，然后在其它属性中可以调用这个变量名来使用该属性,如

@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;
}

效果

vscode 使用什么插件能够过less格式化_css_03


注意点：

在使用变量定义字符串进行拼接时记得要注意用{}把变量名圈起来
如该例子中的设置背景

@bgImgURL: "../assets/img";
ul {
  background: url("@{bgImgURL}/bg.jpg") no-repeat;
}

还有变量名虽然可以随意设置但是别用中文命名，还可以直接在属性设置是进行加减乘除，比如@w100=100px,在后续中其他需要使用这个时可以直接设置属性为@w-test = @w100 + 50px,这时候你设置的这个@w-test属性值就为150px了，注意在+左右留一个空格，如果是两个变量相加的后可以忽略这个空格。

混入: 这次直接给出less文件与编译后的文件，相信大家应该能更容易理解 less文件 

.error(@color:red,@Size: 14px){
  color: @color;
  font-size: @Size;
}

.title {
  .error()
}

.content {
  .error(orange, 20px)
}

先解释一下上面的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;
}

还有博主上面那个注释的设置效果跟上面的效果是一样的

嵌套与颜色函数: 解释这个的时候先看一下html文件 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/04.css">
</head>
<body>
  <ul>
    <li>1内容</li>
    <li>2内容</li>
    <li>3内容</li>
    <li>4内容</li>
    <li>5内容</li>
    <li>6内容</li>
    <li>7内容</li>
    <li>8内容</li>
    <li>9内容</li>
  </ul>
</body>
</html>

上面的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) 混合这个两种颜色

效果图如下:

vscode 使用什么插件能够过less格式化_html_04

继承:

直接给代码，一目了然：
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里面的所有属性

条件判断: 直接看图应该可以很明确知道，左边是less文件，右边是编译后的css文件

vscode 使用什么插件能够过less格式化_css_05

加油，陌生人！