less使用

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

/* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */

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

3、lessc -v 查看版本

4、在main.js  import less from 'less'  Vue.use(less)

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

less中变量的使用 定义方式：@key:value; 使用方式：@key;

字符串拼接变量使用方式 @img:'./img/'; background:url("@{img}1.png")

写减法的时候左右要加空格，否则会理解为杠-

多层嵌套+变量计算；

<div class="box1">

    <div class="box2">

        <div class="box3"></div>

    </div>

</div>

<style lang="less">

@k:100px;

.box1{

    width: @k;

    height:@k;

    background: red;

    .box2{

        width: @k/2;

        height:@k/2;

        background: green;

        .box3{

            width: @k/3;

            height:@k/3;

            background: blue;

        }

    }

}

</style>

混合 = 函数

<div class="box1">我是box1</div>

<div class="box2">我是box2</div>

<style lang="less">

//定义一个函数；

.test(@color:red,@size:14px){

    background: @color;

    font-size:@size;

}

.box1{

//  不传参，使用默认的；

    .test()

}

.box2{

//  给函数传参；

    .test(@color:green,@size:30px)

}

</style>

运算符

可以对高度、宽度、角度进行计算；

<ul>

    <li v-for="item in 4">{{item}}</li>

</ul>

<style lang="less" scoped>

  @k:10px;

    ul{

        list-style: none;

          li{

              border:1px solid ;

              margin:10px 0 ;

          }

            li:nth-child(1){

                width: @k + @k;

                height:@k;

            }

            li:nth-child(2){

                width: @k -5px;

                height:@k;

            }

            li:nth-child(3){

                width: @k * @k;

                height:@k;

            }

            li:nth-child(4){

                width: @k / 2;;

                height:@k;

            }

    }

</style>