less的基本使用

一、在vue项目中安装less依赖

npm install --save less less-loader@5

在使用less语法的vue文件中给style加入如下代码

<style lang="less" scoped>

scoped的作用是该style样式只作用于该vue文件 

二、less的注释

//单行注释

/* */多行注释

三、less中的变量

使用@来申明一个变量

1、作为普通属性值来使用：使用@

@color: blue;
@width: 200px;
@height: @width+100px;

#app {
  width: @width;
  height: @height;
  background-color: @color;

 2、作为选择器和属性名

@color: blue;
@width: 200px;
@height: @width+100px;
@w: width;
@h: height;
@bg: background-color;

#app {
  @{w}: @width;
  @{h}: @height;
  @{bg}: @color;

3、less中的变量作用域和延迟加载

@var: 0;

#app {
  @var: 1px;
  @{w}: @width;
  @{h}: @height;
  @{bg}: @color;

  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    @var: 2px;
    border: @var solid red;
    @var: 3px;
  }

border最后取值@var为3px;

 如果此时把@var:3px;和@var:2px;注释，那么border就会向父辈取值@var为1px;

4、作为url

@url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F34987c456efdea2259ffa4e06b5a0254b1cba2a2.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669256166&t=45f28634952455a251ad5dafede407c5';
background: url(@url);

四、less中的嵌套规则

1、基本的嵌套规则

#app {
  @var: 1px;
  @{w}: @width;
  @{h}: @height;
  @{bg}: @color;

  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    //@var: 2px;
    border: @var solid red;
    //@var: 3px;
    background: url(@url);
  }
}

 这种嵌套规则为父子嵌套，如果要平级嵌套，那么需要添加&符号

.box {
    width: 100px;
    height: 100px;
    background-color: pink;
    //@var: 2px;
    border: @var solid red;
    //@var: 3px;
    background: url(@url);

    &:hover {
      width: 50px;
      height: 50px;
    }
  }

 五、less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

1、普通混合

普通混合被编译成css文件是，混合代码段依然存在

<div class="app">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
.app {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  position: relative;

  .box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .box1 {
    .box;
    left: 100px;
    top: 100px;
  }

  .box2 {
    .box;
    left: 0;
    top: 0;
  }
}

2、不带输出的混合

不带输出的混合在公共代码块.app后加上()，混合代码块就不会出现在编译后的css文件

.app {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  position: relative;

  .box() {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .box1 {
    .box;
    left: 100px;
    top: 100px;
  }

  .box2 {
    .box;
    left: 0;
    top: 0;
  }
}

3、带参数的混合

.box(@left, @top) {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    left: @left;
    top: @top;
  }

  .box1 {
    .box(0, 0);
  }

  .box2 {
    .box(100px, 100px);
  }

4、带参数并且有默认值的混合

.box(@left: 0, @top: 0) {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    left: @left;
    top: @top;
  }

  .box1 {
    .box();
  }

  .box2 {
    .box(100px, 100px);
  }

5、带命名参数的混合

.box(@left: 0, @top: 0) {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    left: @left;
    top: @top;
  }

  .box1 {
    .box(@top: 10px);
  }

  .box2 {
    .box(@left: 200px);
  }

6、匹配模式

<div>
    <div class="sjx1"></div>
    <div class="sjx2"></div>
    <div class="sjx3"></div>
    <div class="sjx4"></div>
  </div>
<style lang="less" scoped>
.triangle(@_, @w, @c) {
  width: 0;
  height: 0;
}

.triangle(T, @w, @c) {
  border: @w solid;
  border-color: @c transparent transparent transparent;
}

.triangle(R, @w, @c) {
  border: @w solid;
  border-color: transparent @c transparent transparent;
}

.triangle(B, @w, @c) {
  border: @w solid;
  border-color: transparent transparent @c transparent;
}

.triangle(L, @w, @c) {
  border: @w solid;
  border-color: transparent transparent transparent @c;
}

.sjx1 {
  .triangle(T, 25px, pink);
}

.sjx2 {
  .triangle(R, 50px, deeppink);
}

.sjx3 {
  .triangle(B, 75px, purple);
}

.sjx4 {
  .triangle(L, 100px, blue);
}
</style>

结果：

7、arguments变量

<div class="sjx5"></div>
.sjx5 {
  width: 100px;
  height: 100px;
  .styleless(1px, solid, pink)
}

.styleless(...) {
  border: @arguments;
}

 六、less中的继承

1、附加在选择器上使用

<div>
    <div class="box">
      hello world
    </div>
  </div>
.father {
  color: aliceblue;
}

.box:extend(.father) {
  width: 100px;
  height: 100px;
  background-color: pink;
}

2、在样式集中使用

<div>
    <div class="box">
      hello world
    </div>
  </div>
.father {
  color: aliceblue;
}

.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  &:extend(.father);
}

3、继承多个样式

<div>
    <div class="box">
      hello world
    </div>
  </div>
.father {
  color: aliceblue;
}

.son {
  border: 10px solid skyblue;
}

.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  &:extend(.father, .son);
}

4、继承中的all关键字

当继承嵌套结构的样式时，如果想要同时继承嵌套结构内的样式，需要在样式名加上 ‘all’ 关键字。

<div>
    <div class="father">
      <div class="son"></div>
    </div>
  </div>
.box {
  background-color: blue;

  &:hover {
    background-color: #fff;
  }
}

.father {
  width: 200px;
  height: 200px;
  background-color: red;

  .son:extend(.box all) {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
  }
}