1, Preparation process
The folder is as shown in the figure
The html code is as follows
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/text.css"> </head> <body> </body> </html>
After we write the style in the text.less file, we drag the folder to koala for compilation, so it will automatically create a new css file in the css folder, so we must import a css file.
2, Key functions of less
1. variables
html code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/text.css"> </head> <body> <header>head</header> </body> </html>
less code:
body {
padding: 0;
margin: 0;
}
/*Next, define a variable. less defines the variable starting with @ followed by the variable name*/
@header-height: 60px;
header {
height: @header-height;
}2. Mix in / Mixins
html code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/text.css"> </head> <body> <div class="left">1</div> <div class="right">2</div> </body> </html>
css code:
body {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
font-size: 25px;
}
/*Here's a mix in style*/
.fl {
float: left;
}
.fr {
float: right;
}
.left {
.fl();
background-color: red;
}
.right {
.fr();
background-color: green;
}3. Parametric Mixins
html code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/text.css"> </head> <body> <div>1</div> </body> </html>
less code:
body {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
font-size: 25px;
background-color: green;
margin: 10px auto;
}
/*Let's write a parameter blending style*/
.border-radius(@radius) {
border-radius: @radius;
}
div {
.border-radius(15px);
}4. Parameter logic condition mixing / Mixin Guards
html code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/text.css"> </head> <body> <div class="one">First</div> <div class="two">The second</div> <div class="three">Third</div> </body> </html>
less code:
body {
padding: 0;
margin: 0;
}
/*Parameter logic condition mix*/
#ft-size(@name) when(@name=small) {
font-size: 10px;
}
#ft-size(@name) when(@name=medium) {
font-size: 20px;
}
#ft-size(@name) when(@name=big) {
font-size: 30px;
}
.one {
#ft-size(small);
}
.two {
#ft-size(medium);
}
.three {
#ft-size(big);
}5. Nesting rules
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body>
<header>
<div>
<div class="one">this is one</div>
</div>
</header>
</body>
</html>less code:
body {
padding: 0;
margin: 0;
}
/*Quote*/
header {
width: 800px;
height: 500px;
border: 1px solid red;
div {
width: 400px;
height: 100px;
margin: 20px auto;
border: 1px solid green;
.one {
color: red;
font-size: 50px;
/*&Refers to the current directory, i.e. header div.one*/
&:hover {
color:green;
}
}
}
}