less 使用前准备步骤

1、npm i less --save-dev 把less源码安装到开发环境

2、npm i less-loader@6 --save-dev 安装less解析器（★一定要指定版本）

3、在main.js中引入import less from 'less' 然后使用Vue.use(less) (这是全局使用)

4、独立的vue文件需要引入less <style lang="less"></style>

如何使用 less

定义变量及嵌套使用

定义方式：@k:v; 使用方式：@k;

字符串与变量的拼接

字符串与变量拼接需要使用@{}

定义函数

调用函数时可选择性传参，不传参则会使用默认值

运算符

+、-、*、/

例子代码如下：

      <template>
      <div class="about">
          <div class="box1">
              <div class="box2">
                <div class="box3">
                    <h1>正在使用less</h1>
                </div>
              </div>
          </div>

        <div class="bg"></div>
      </div>
    </template>
    <script>
    export default {
      name:'AboutView',

    }
    </script>
    <style lang="less">
    @imgUrl:'../assets/';
    @colorRed:red;
    @colorBlue:blue;
    @colorYellow:yellow;
    @colorGreen:green;
    @Size:100px;

    .bg{
      width:@Size * 2;
      height: @Size * 2;
      border: 1px solid red;
      background: url('@{imgUrl}logo.png') no-repeat;
    }

    .test(@colorGreen,@Size){
      background: @colorGreen;
      font-size: @Size;
    }
    .box1{
      background: @colorRed;
      width:@Size * 5;
      height: @Size * 5;
      .box2{
        background: @colorBlue;
        width: @Size + 200px;
        height: @Size - 10px;
        .box3{
          background: @colorYellow;
          width:@Size / 2;
          height: @Size / 2;
          h1{
            .test(@colorGreen, @Size / 2)
          }
        }
      }
    }

</style>

less语法使用

less 使用前准备步骤

如何使用 less