variable

When declaring a variable, prefix the variable name@

@width: 10px;

.class-name {
  width: @width;
}
Copy the code

hybrid

To apply a set of attributes to another class class, write it the same way as a normal class, when called.Mixed name ()

.mixins-name {
  width: 200px;
  height: 200px;
}

.mixins-color(@value) {
  color: @value;
}

.class-name {
  .mixins-name();
  .mixins-color(red);
}
Copy the code

Namespaces and accessors

Grouping mixes for organizational or encapsulation purposes (# namespace name) for later reuse or maintenance

@color: red;
#namespace() {
  .width {
    width: 200px;
  }
  .bg-color {
    background: @color;
  }
}
.class-name {
  // Two ways of writing
  #namespace.width();
  #namespace > .bg-color;
}
Copy the code

mapping

It is written similarly to a namespace

#colors() {
  primary: blue;
  secondary: green;
}

.class-name {
  background: #colors[primary];
}
Copy the code

inheritanceextend

<template>
  <div class="sub-one">
    subClassOne
    <div class="aaa">1111111111111</div>
  </div>
  <div class="sub-two">subClassTwo</div>
</template>

<style lang="less" scoped>
.parent-class {
  background: red;
  .aaa {
    background: blue; }}.sub-one {
  width: 200px; & :extend(.parent-class); / / writing1& :extend(.parent-class .aaa); // Inherit nested selectors}.sub-two:extend(.parent-class) {//2{} cannot be empty, so it is setwidth
  width: 100px;
}
</style>
Copy the code

nested

Nesting should not exceed 3 layers, otherwise performance will be affected

escape

Arbitrary strings are allowed as attribute or variable values. Anything in the form of ~ “anything” is printed as is

Function (Understanding)

Less built-in functions:less.bootcss.com/functions/

scope

A defined variable or blend, if not found locally, is inherited from the parent scope

The import

@import "Address/filename. Less"
Copy the code

The use of less method is introduced: blog.csdn.net/lhjuejiang/…

Exercise: Recursively create multiple style classes that can be used to generate common size styles such as padding and margin

<template>
  <div class="pd-5">1111111111</div>
  <div class="pd-10">1111111111</div>
  <div class="pd-15">1111111111</div>
  <div class="pd-20">1111111111</div>
  <div class="pd-25">1111111111</div>
</template>

<style lang="less" scoped>
.other {
  background: salmon;
  margin: 10px 0;
}

.padding(@i) when(@i <= 30) {
  .pd-@ {i} {
    padding: @i + 0px;
    .other(a); // Add a blending style here to make it more visible..padding((@i + 5));
}
.padding(5); // The above loop is compiled into CSS code as follows.pd-5 {
  padding: 5px;
}
.pd-10 {
  padding: 5px;
}
.pd-15 {
  padding: 5px;
}
.pd-20 {
  padding: 5px;
}
.pd-25 {
  padding: 5px;
}
</style>
Copy the code

<style lang="less" scoped>
// Generate margin, padding and other common size styles
.magin-padding(@i) when(@i<=30) {
  .mt-@{i} {
    margin-top: @i + 0px;
  }
  .mb-@{i} {
    margin-bottom: @i + 0px;
  }
  .ml-@{i} {
    margin-left: @i + 0px;
  }
  .mr-@{i} {
    margin-right: @i + 0px;
  }
  .pt-@{i} {
    padding-top: @i + 0px;
  }
  .pb-@{i} {
    padding-bottom: @i + 0px;
  }
  .pl-@{i} {
    padding-left: @i + 0px;
  }
  .pr-@{i} {
    padding-right: @i + 0px;
  }
  .magin-padding(@i +5);
}
.magin-padding(5);

</style>
Copy the code