vuex--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使用

• 语法：@变量名：值
• 调用：@变量名

@fsize：18px
  div{
     font-size:@fsize;//调用：@变量名
    }

运算符号：+-*/(加减乘除)

@w:120px
 div{
   width:@w/2
 }

嵌套

#template代码
<div class="box1">
      <div class="box2">
        <div class="box3"></div>
      </div>
    </div>
    
    <style lang="less">
     .box1 {
  width: @k*2;
  height: @k*2;
   background-color: @colorBlue;
   .box2 {
    width: @k;
     height: @k;
     background-color: @colorGold;
     .box3 {
       width: @k / 2;
       height: @k / 2;
       background-color: @colorRed;
    }
   }
}
 </style>

混合（函数的使用）

• 定义函数：把一段相同的代码交给一个函数来管理

.public() {      //定义函数
    width: 400px;
    height: 500px;
    background: red;
  }
  div {
     .public();    // 调用函数
  }
  p {
     .public();
 }

传参数

• 不传参则会使用默认值
• 参数的顺序 和 调用的实际值 是一一对应的

@w 表示假设的宽度, @h 表示假设的高度
  .public(@w,@h) {
    width:@w;
    height: @h;
    background: red;
  }
  div {
    .public(600px,300px);   // 调用
  }
 p {
   .public(400px,100px);
 }

使用refs的方法 必须要配置$nextTick获取到dom之后再执行slideTo方法

this.$nextTick(()=>{
         在异步操作里面slideTo第一个参数表示第几张
        this.$refs.mySwiper.swiper.slideTo(2,1000,false)
      })
```3