两分钟快速上手less

2022年05月10日 阅读数:8
这篇文章主要向大家介绍两分钟快速上手less,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1.打开项目终端,进行安装;

npm install --save-dev less-loader lessjavascript

如安装后报错,下降版本后重试(如下是自测无报错的版本)css

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


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"。npm

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

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