1. Less person
Less as a CSS extension language, that is, CSS preprocessor. Leaner Style Sheets (Leaner Style Sheets), short for less, is simply adding functionality to CSS such as variables, functions, scopes, and so on. Its advantages are: more maintenance, scalability, etc., can reduce the cost of maintenance, according to this, then less can let us write less code to do more things.
Compared with CSS, CSS syntax is very simple, but low requirements for developers, more appropriate small white, but encountered some problems, such as no such variables, functions and so on, indeed is not as good as less extensibility, need to write a lot of code, but did not see eyes logic code, CSS redundancy is relatively high. Not convenient maintenance, not conducive to reuse, and no computing ability.
2. Less use
The use of less is not complex, is to create a new less file, and then use less statement in less file, when the less statement compiled will automatically generate a CSS file with more than a suffix.
3. Differences between less and simple CSS statements
style.less
style.css
By contrast, or feel more comfortable with less statement code, the above code content is called nested writing method, this greatly reduces the amount of code, less code looks more clear.
4. Less grammar
4.1 Variables
4.1.1 Common variables
Variables are defined as @ and can be assigned to variables!
Syntax: @ Variable name: value. Less:
// 1. The normal variable @bgcolor :white; @Height:50rpx; // contain{background-color: @bgcolor; background-color: @bgcolor; background-color: @bgcolor; } .row{ height:@Height; margin-left:@Height; }Copy the codeCompiled CSS
// 2. As a selector and property name @mycontain :width; .@{Mycontain}{// selector height:300rpx; @{Mycontain}:200rpx; // Attribute name}Copy the codeNote: it is best to use global variables to avoid reuse! Contain {} row{} contain (Height) {} row{} contain (Height) {} row{} contain (Height) {} row{} contain (Height) {} row{} contain (Height) {} row{} contain (Height) {}
4.1.2 Selector and attribute names
Both the selector and the property name can be used as variables
Syntax: @ Selector name: property name;
// 2. As a selector and property name @mycontain :width; .@{Mycontain}{// selector height:300rpx; @{Mycontain}:200rpx; // Attribute name}Copy the codeCompiled CSS
.width {
height: 300rpx;
width: 200rpx;
}
Copy the code4.1.3 as a URL
When used, use “” to expand the value of the variable, use the same way to use the variable @{variable name};
Syntax: @ variable: path;
Less:
@img-url:".. /imgs/idnex"; img{ background-image: url("@{img-url}/shouye.png"); }Copy the codeCompiled CSS:
img { background-image: url(".. /imgs/idnex/shouye.png"); }Copy the code4.1.4 Lazy loading
What is lazy loading? Variables are lazy-loaded and do not have to be declared before use.
Syntax: @ variable 1: @ variable 2;
@ variable 2:9%;
less:
// 4. Lazy-eval {width:@var; } @var:@a; @a:9%;Copy the codeCompiled CSS:
.lazy-eval {
width: 9%;
}
Copy the code4.1.5 Defining multiple variables with the same name
When a variable is defined twice, only the last one is used, and less searches up from the current scope (i.e., bottom up). This behavior is similar to CSS definitions that always use the last defined property value.
Less:
.class{ @var:1; @var:2; // Selected search. brass{@var:2; three:@var; // The result is three:4; @var:3; @var:4; } one:@var; // The result is one:2; }Copy the codeCompiled CSS:
.class {
one: 2;
}
.class .brass {
three: 4;
}
Copy the code5.1 Mixins
5.1.1 Ordinary mixing
Blending is a way of introducing (” blending “) a set of attributes from one rule to another rule set. This means that selector classes defined in LESS can be placed directly into other selector classes, and this reuse is very strong.
Less:
/
Bor {background-color: aqua; width: 32rpx; } .poop{ color:white; .bor; } .boom{ height:200rpx; .bor; }Copy the codeCompiled CSS:
.bor {
background-color: aqua;
width: 32rpx;
}
.poop {
color: white;
background-color: aqua;
width: 32rpx;
}
.boom {
height: 200rpx;
background-color: aqua;
width: 32rpx;
}
Copy the code5.1.2 Mixing without output
If you want to create a hybrid class, but I don’t want it to output to CSS styles and display.
As long as the name of the class is followed by parentheses, it will not be displayed in the CSS style!
Less:
Mymix {color:black; // 2. }.mymix-echa(){background-color: white;}.mymix-echa(){background-color: white; } .dad{ width: 30rpx; height:30rpx; }Copy the codeCompiled CSS:
.mymix {
color: black;
}
.dad {
width: 30rpx;
height: 30rpx;
}
Copy the codeThe.mymix-echa() class is not displayed in CSS styles.
5.1.3 Mixing with selectors
This one has selectors, so you can put selectors in.
Syntax: {& : selector}
Less:
Father (){&:hover{background-color: white; font-size:32px; }}. Child {// hover. Father; }.son{// hover. Father; }Copy the codeCompiled CSS:
.child:hover {
background-color: white;
font-size: 32px;
}
.son:hover {
background-color: white;
font-size: 32px;
}
Copy the code5.1.4 Mixing with Parameters
Taking parameters is passing parameters.
Syntax: Name of class (parameter) {}
less:
Son (@width){width:@width; // 4. } .dad{ .son(300px); // Need to pass a parameter}Copy the codeCompiled CSS:
.dad {
width: 300px;
}
Copy the codeHow do parameters use default values? Parameters can be defaults, so no arguments need to be passed, as follows:
Less:
Son (@width:200px){width:@width; //5. } .dad{ .son(); }Copy the codeCompiled CSS:
.dad {
width: 200px;
}
Copy the code5.1.5 Mixing with Multiple parameters
A combination can take multiple arguments, separated by semicolons or commas.
For example:. Mini (parameter 1; Parameter 2) This represents a semicolon; .mini(parameter 1, parameter 2) This represents a comma.
However, it is recommended to use semicolons as much as possible, because this comma can be compiled for parameter splitting or CSS for list splitting.
(1) If two arguments, each of which is a comma-separated list, end with a semicolon:.mini(1,2,3; something, ele);
less:
//6. Mix with multiple parameters. Mini (@color; @padding:xxx; @margin:2){ color-1:@color; padding-2:@padding; margin-3:@margin; }. Div {. Mini (1, 2, 3; something, ele); }Copy the codeCompiled CSS:
.div {
color-1: 1, 2, 3;
padding-2: something, ele;
margin-3: 2;
}
Copy the codeLess. Div {.mini (1,2,3; Something,ele)} has only two arguments, so parameters 1 and 2 are passed, but since parameter 3 has default values, the result of compiled CSS is generated (as above).
(2) if all three arguments are separated by commas, various arguments will be passed:.mini(1,2,3).
less:
//6. Mix with multiple parameters. Mini (@color; @padding:xxx; @margin:2){ color-1:@color; padding-2:@padding; margin-3:@margin; }. Div1 {. Mini (1, 2, 3); }Copy the codeCompiled CSS:
.div1 {
color-1: 1;
padding-2: 2;
margin-3: 3;
}
Copy the codeAnalysis: Since the arguments are all three and are separated by commas, they are passed to parameters 1, 2, and 3, producing the result of compiled CSS (as above).
(3) if the argument has a comma and a semicolon inside it, then the first argument will be passed, that is, the parameter 1:.mini(1,2,3;). ;
less:
//6. Mix with multiple parameters. Mini (@color; @padding:xxx; @margin:2){ color-1:@color; padding-2:@padding; margin-3:@margin; }. Div2 {. Mini (1, 2, 3) ; }Copy the codeCompiled CSS:
.div2 {
color-1: 1, 2, 3;
padding-2: xxx;
margin-3: 2;
}
Copy the codeAnalysis: Multiple arguments with commas and semicolons are passed to parameter 1, and parameters 2 and 3 have default values, generating compiled CSS results (as shown above).
5.1.6 the arguments variable
The arguments variable stands for variparameters, meaning the order of the parameters from first to last. Note: this is the parameter value position must be one-to-one correspondence.
less:
/ / 7. The arguments variables. Son3 (@ dd1:20 px; @dd2:solid; @dd3:white){ border:@arguments; } .div4{ .son3(); }Copy the codeCompiled CSS:
.div4 {
border: 20px solid white;
}
Copy the code6.1 Matching Mode
A character is defined when a value is passed, and the rule set is called when that character is used.
Less:
Border (all,@w){border-radius: @w; } .border{ .border(all,50%); }Copy the codeCompiled CSS:
.border {
border-radius: 50%;
}
Copy the code7.1 Get the return value of the variable in the mix
It’s like calling a function. Less:
.ave(@x,@y){@ave (@x+@y); } .son{ .ave(20px,40px); width:@ave; }Copy the codeCompiled CSS:
.son {
width: 60px;
}
Copy the codeAnalyzing the code process:
Ave (@x,@y);
Ave {} = @ave;
Son {} @ave;
4. The compiled CSS is generated with a width of 60px.
8.1 Nested Rules
8.1.1 Common writing method
less:
Contain {. Dad {width:30px; background-color: #fff; .son{ border-radius: 40px; } } .dad1{ height:300px; background-color: black; }}Copy the codeCompiled CSS:
.contain .dad {
width: 30px;
background-color: #fff;
}
.contain .dad .son {
border-radius: 40px;
}
.contain .dad1 {
height: 300px;
background-color: black;
}
Copy the codeLess writing structure is of course very clear, late for maintenance, very simple.
8.2 Parent element selector &
Represents all the parent selectors of the current selector, using the ampersand to reference the selector’s name.
less:
//11. Parent element selector &.bgcolor {background: black; a{ color:#fff; &:hover{ color:blue; }}}Copy the codeCompiled CSS:
.bgcolor {
background: black;
}
.bgcolor a {
color: #fff;
}
.bgcolor a:hover {
color: blue;
}
Copy the codeOr you could use this
Less:
.contain{ &>p{ color:red; } &+.contain{ background-color: black; } & div{ width: 300px; }}Copy the codeCompiled CSS:
.contain > p {
color: red;
}
.contain + .contain {
background-color: black;
}
.contain div {
width: 300px;
}
Copy the code8.1.3 Changing the order of selectors &
If the name of the current selector is followed by &, the current selector is referred to the parent.
Less:
&. contain{h1&{width:200px; height:300px; } } #son{ ul{ li{ .contain&{ height:100px; background-color: #fff; }}}}Copy the codeCompiled CSS:
h1.contain {
width: 200px;
height: 300px;
}
.contain#son ul li {
height: 100px;
background-color: #fff;
}
Copy the code9.1 operation
Any value, color, or variable can be computed, and less will automatically infer units of value, so you don’t have to add units to every value.
less:
Contain {font-size:300px+200*2; }Copy the codeCompiled CSS:
.contain {
font-size: 700px;
}
Copy the code11.1 name space
Reusability can be supported by packaging variables or mixed blocks together, or by nesting multiple layers of ids or classes.
Use #contain() as the namespace and do not display the #contain() namespace in CSS styles.
less:
1 #contain(){// add (); background-color: blue; .dad{ width:300px; &:hover{ height:200px; } } .father{ width:100px; height:200px; }}Copy the codeTiweq (){color:# FFF; height:200px; .eitw{ width:100px; border:200px; }}Copy the code// Display. Contain1 {background-color: aqua; #contain>.dad; } .contain2{ .tiweq>.eitw; }Copy the codeCompiled CSS:
.contain1 {
background-color: aqua;
width: 300px;
}
.contain1:hover {
height: 200px;
}
.contain2 {
width: 100px;
border: 200px;
}
Copy the codeAnalysis: If you want to get a style in the namespace, for example, you want to get dad{.. } module to contain data, just write #contain>. Dad, then CSS will display the data you need;
Copy the codeIn addition, the most ellipsis is “>” writing. As long as you don’t write “>”, you can get the same data.
Less:
// 14. Namespace.tiweq(){color:# FFF; height:200px; .eitw{ width:100px; border:200px; } } .cotain3{ .tiweq .eitw; }Copy the codeCompiled CSS:
.cotain3 {
width: 100px;
border: 200px;
}
Copy the code12.1 scope
Scope in LESS is very similar to the concept of scope in programming languages. Variables and blends are first looked for locally, and if none are found, the editor looks for them in the parent scope, and so on.
less:
//15. Scope @clolor:# FFFFFF; .contain{ width: 50px; a{ color: @clolor; } @clolor:blue; }Copy the codeCompiled CSS:
.contain {
width: 50px;
}
.contain a {
color: blue;
}
Copy the code11. Importing
You can import one or more.less files, and then all the variables in that file can be used in the current LESS project! Let’s say I have a main.less file with variables in it, so I want to import the main.less file and use its variables.
main.less
@baby:300px;
Copy the codeindex.less
Import @import ".. /main"; Contain -qq{width:@baby; // import main.less file. Contain -qq{width:@baby; } index.css .contain-qq { width: 300px; }Copy the codeAdditional parameters can be taken:
//@import "main.less"; //@import (reference) "main.less"; //@import (inline) "main.less"; //@import (once) "main.less"; //@import (LESS) "index. CSS "; //@import (CSS) "main.less"; @import (multiple) ".. /main.less"; @import (multiple) ".. /main.less"; //multiple, which allows importing files with the same file name multiple timesCopy the code12. Function library
This function library is a lot of various functions, and the content is a bit much, will fill the Less function library. Not only to learn a language, but also to practice and code, so that there will be progress.
The original link: blog.csdn.net/h907310116/…