Series Article Directory
Article directory
1. Introduction to Less
Less is a CSS preprocessing language . It expands the CSS language and adds functions such as variables , mixins, and functions, making CSS easier to maintain , themes and extensions .
Less can run on Node or the browser.
Less allows us to do more with less code .
2. Install Easy LESS
Easy LESS: used to automatically generate CSS or WXSS files after writing Less files
3. The first small example
index.html file
- Note: import the css file in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="container">
Hello Less!
</div>
</body>
</html>
index.less file
- @xxx: define common styles
- When using it, you can directly @xxx
@color: skyblue;
@bgColor: red;
@width: 100px;
@height: 100px;
#container {
color: @color;
background-color: @bgColor;
width: @width;
height: @height;
}
index.css file
- The automatically escaped css file is as follows
#container {
color: skyblue;
background-color: red;
width: 100px;
height: 100px;
}
Here is the front-end grocery store , looking forward to your Sanlian+ attention