Article Directory
inherit
Use of the extend keyword
extend is a pseudo-class of Less. It inherits all styles from matching declarations.
/* Less */
.animation{
transition: all .3s ease-out;
.hide{
transform:scale(0);
}
}
#main{
&:extend(.animation);
}
#con{
&:extend(.animation .hide);
}
/* 生成后的 CSS */
.animation,#main{
transition: all .3s ease-out;
}
.animation .hide , #con{
transform:scale(0);
}
all global search and replace
All declarations matched by the selector.
/* Less */
#main{
width: 200px;
}
#main {
&:after {
content:"Less is good!";
}
}
#wrap:extend(#main all) {
}
/* 生成的 CSS */
#main,#wrap{
width: 200px;
}
#main:after, #wrap:after {
content: "Less is good!";
}
Reduce code duplication
On the surface, the biggest difference between extend and method is that extend shares the same statement with the same selector, while method uses its own statement, which undoubtedly increases the duplication of code.
The method example is compared with the extend above:
/* Less */
.Method{
width: 200px;
&:after {
content:"Less is good!";
}
}
#main{
.Method;
}
#wrap{
.Method;
}
/* 生成的 CSS */
#main{
width: 200px;
&:after{
content:"Less is good!";
}
}
#wrap{
width: 200px;
&:after{
content:"Less is good!";
}
}
Key points for inheritance
- Spaces are allowed between the selector and the extension: pre:hover :extend(div pre).
- There can be multiple extensions: pre:hover:extend(div pre):extend(.bucket tr) - Note that this is the same as pre:hover:extend(divpre, .bucket tr).
- This is not allowed, the extension must be at the end: pre:hover:extend(div pre).nth-child(odd).
- If a ruleset contains multiple selectors, all selectors can use the extend keyword.
import
file import
The suffix can be omitted when importing less files.
import "main";
//等价于
import "main.less";
The position of @import can be placed freely
#main{
font-size:15px;
}
@import "style";
reference
The most powerful features in Less use the imported Less file, but don't compile it.
/* Less */
@import (reference) "bootstrap.less";
once
Default behavior for @import statements. This means that the same file will only be imported once, and the duplicate code for subsequent imported files will not be resolved.
@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored
multiple
Using @import (multiple) allows importing multiple files with the same name.
/* Less */
// file: foo.less
.a {
color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
/* 生成后的 CSS */
.a {
color: green;
}
.a {
color: green;
}
conditional expression
Mixed with conditions
- Comparison operators: >, >=, =, =<, <
- Format:
when() { }
// lightness() 是检测亮度的函数，用%度量
.mixin(@a) when(lightness(@a) >= 50% ) {
background-color: black;
}
.mixin(@a) when(lightness(@a) < 50% ) {
background-color: white;
}
.mixin(@a) {
color: @a;
}
.class1 {
.mixin(#ddd);
}
.class2 {
.mixin(#555);
}
//编译输出
.class1 {
background-color: black;
color: #dddddd;
}
.class2 {
background-color: white;
color: #555555;
}
type detection function
- type of detected value
- iscolor
- isnumber
- isstring
- iskeyword
- isurl
.mixin(@a: #fff; @b: 0) when(isnumber(@b)) {
color: @a;
font-size: @b;
}
.mixin(@a; @b: black) when(iscolor(@b)) {
font-size: @a;
color: @b;
}
unit detection function
- Checks if a value other than a number is in a specific unit
- ispixel
- ispercentage
- name
- isuni
mixin(@a) when(ispixel(@a)) {
width: @a;
}
.mixin(@a) when(ispercentage(@a)) {
width: @a;
}
.class1 {
.mixin(960px);
}
.class2 {
.mixin(95%);
}
//编译输出
.class1 {
width: 960px;
}
.class2 {
width: 95%;
}
function
function library
- Less encapsulates a lot of function libraries, such as color definition, color operation, color mixing, string processing and so on.
- For example, color(): used to parse the color, and convert the string representing the color into a color value.
body {
color: color("#f60");
background: color("red");
}
//编译输出
body {
color: #ff6600;
background: #ff0000;
}
- For example convert(): converts a number from one type (unit) to another
- Length units: m, cm, mm, in, pt, px, pc
- Time unit: s, ms
- Angle unit: rad (radian), deg (degree), grad (gradient), tum (circle)
body {
width: convert(20cm, px);
}
//编译输出
body {
width: 755.90551181px;
}
For more functions, go to the official website to view! https://less.bootcss.com/