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