两分钟快速上手less

1.打开项目终端，进行安装；

npm install --save-dev less-loader less

如安装后报错，降低版本后重试（以下是自测无报错的版本）

npm install --save-dev less-loader@5.0.0 less@4.1.2

---

2.使用less；

<style lang="less" scoped>
//less变量
@abbBgblue: skyblue;                 //天蓝色的变量
@abbBgyellow: yellowgreen;           //黄绿色变量
@abbBgpink: pink;                    //粉色变量

.abb {
  width: 100px;
  height: 100px;
}

//less嵌套
.box1 {
  width: 150px;
  height: 150px; 
  background: @abbBgb;               //使用变量
  .box2 {
    .abb();                          //less混入(可简写成 .abb;)
    background: @abbBgyellow;        //使用变量
    .box3 { 
      width: 50px;
      height: 50px;
      background: @abbBgpink;        //使用变量
      &:hover {                      //less带选择器混合
        background: black;
      }
    }
  }
}
</style>

到这里你已经可以用less写项目了,已经掌握了less的基本语法👍

---

 

 扩充

• 以上代码中lang是什么意思?

lang指的是在此style中将使用的css预处理器,如使用less,即lang="less"。

•  以上代码中scoped是什么意思?

 scoped表示是局部作用域,只作用于本组件,其他组件访问不到style内容。