在vue-cli中使用less

在vue项目中如果安装最新版本的 less 和 less-loader 会报错，安装不上

 

解决办法：

安装低版本的

npm install less@3.9.0 less-loader@4.1.0 --save-dev

安装成功后

1. 在main.js中

import less from 'less'
Vue.use(less)

 2. 然后再.vue文件中引入less

<style lang="less"></style>

 

试一下，成功啦，开始玩耍

 

---

 

 

less的常用方式：

1. 『@』变量的使用

<div class="box"></div>
 
<style lang="less">
　　@color:red;
　　@k:100px;
　　.box{
　　　　width:@k;
　　　　height:@k;
　　　　background: @color;
　　}
</style>

 

2. 运算符的使用。注意 除法 需要整体加上一个()括号，不然会认为是两个值

<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) * 1;;
　　　　　　height:@k;
　　　　}
    }
</style>

 

3. mixins 混合（函数）

用法1，() 混合扩展编译，相当于把样式重新写入元素中，不是分组的方式

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

<style lang="less>
    .box1{
        width: 100px;
        height: 100px;
    }
    .box2{
        .box1();
        background: rgb(0,0,0);
    }
</style>

用法2，直接定义混合

<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>

 

4. 『~'  '』避免编译器编译

<div class="box1"></div>
 
<style lang="less">
    .box1{
        width:~'calc(300px-30px)';
    }
</style>

 

5. 『&』父元素符的使用

　『extend』 继承

　　　　- 多个选择器中间用 , 隔开

　　　　- all 代表继承所有相关声明块

　　　　- 继承相当于伪类，但必须放在最后

　　　　- 继承的参数不能为混合，父类也不能是混合

　　　　注意：:extend()扩展编译时，是把相同的样式用分组选择器的方式写出来。

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
 
<style lang="less">
    .box1{
        width: 100px;
        height: 100px;
    }

    .box2{
        background-color: red;
    }

    .box3{
        color: blue;
        &:extend(.box1, .box2);
    }
</style>

 

6. 『@import』引入

<style lang="less">
    @import "test.less";
</style>

 

7. 『@{  }』字符串拼接变量的使用。注意：路径需要用""包裹，@{img}这种凡是把变量引进来才能生效；

<div class="box1"></div>
 
<style lang="less" scoped>
    @img:'./img/';
    @k:100px;
    .box1{
        width:@k;
        height:@k;
        background:url("@{img}1.png")
    }
</style>