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>

1.安装：

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

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

3.lessc -v 查帆咐看版本，如果版本号出不来，全局安装下less，在cmd里查

4.在main.js import less from 'less' Vue.use(less) 目的：在敬棚所有页面都可以使用less预编译css语言，

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

2.less的使用

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

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

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

多层嵌套+变量计算；

---