01 less的使用

使用less 安装两个包
1===》cnpm install less less-loader --save-dev

 

less中的注释
以 //开头的注释  不会被编译到css文件中去
以 /**/  包裹的注释 会被编译到css 文件中去

3===》
1)使用@来声明一个变量  @pink:pink; 【颜色值】变为变量

<p class="p">123</p>
<style lang="less" scoped>
@colorred: red;
.p{
  color: @colorred;
}
</style>
-----------------------------

<p class="p">123</p>
2) css【属性】变为变量  将margin变为一个变量
@m: margin;
.p {
  @m: 20px;
  或者 @{m}: 30px;  推荐
}
--------------------------------

3) 变量可以作为【选择器】 @{作用的元素}{}
<span>33</span>

@sp: span;
@{sp} {
  background: pink;
}
------------------------------------
4）less作为url. @{}
一般我们很少将 属性 和选择器  变为变量

记住  less中的变量都是延迟加载的
在less中的变量都是块级作用域
一个{} 代表一个作用域 哈  这样可以避免变量污染

 

less中的嵌套规则
第一种嵌套规则
div {
    p{

    }
}

第二种 &的使用 它代表的是平级
 光标放在span 上  出现变色
  <div class="box">
      <p class="p">123</p>
      <span>33</span>
    </div>

.box {
  span {
    margin-top: 20px;
    &:hover {
      color: red;
    }
  }
}

必须要使用 &

 

混和
需求  div 和span 都要 出现了相同的代码 这个时候就可以使用混合了

 <style lang="less" scoped>
.xiangtong {
  width: 300px;
  height: 300px;
  background: red;
  line-height: 300px;
  text-align: center;
  display: block;
}

.box {
  .p {
    .xiangtong;
  }
  span {
    .xiangtong;
  }
}
</style>

 

---------------------
带参数的混合哦
p的宽高是100px, 200px 出现红色
span的宽高是50px, 50px,  出现白色

<template>
  <div>
    <div class="box">
      <p class="p">123</p>
      <span>33</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

 <style lang="less" scoped>
.xiangtong(@w,@h,@c) {
  width: @w;
  height: @h;
  background: @c;
  line-height: @h;
  text-align: center;
  display: block;
}

.box {
  .p {
    .xiangtong(100px, 200px, 200px,red);
  }
  span {
    .xiangtong(50px, 50px, 50px,green);
  }
}
</style>
--------
混合并且有默认参数哦
.xiangtong(@w:100px,@h:50px,@c:red) {
  width: @w;
  height: @h;
  background: @c;
  line-height: @h;
  text-align: center;
  display: block;
}

-------------
当形参和实参个数不一致的时候 你就可以指定 你的这个参数是给谁的(命名参数的混合)
.xiangtong(@c:pink)