Article directory
1. How to use
Official website: https://lesscss.org
There are many ways to install and use, two simple ones are introduced:
1. npm installation: npm install -g less
2. Ordinary h5 download less.js reference
Download address: https://cdn.jsdelivr.net/npm/less
2. Easy to use
1. dome example
Not much nonsense, just upload the code
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="./js/less.js" ></script>
<title>测试</title>
</head>
<body>
<div class="container">
<header></header>
<section></section>
<footer></footer>
</div>
</body>
</html>
css：【style.less】
//变量
//伪类
//嵌套
//伪元素
//媒体查询
//外面定义变量，里面可以直接用
@width:600px;
@color: red;
.container{
width: @width;
height: 800px;
background:@color;
header{
height:100px;
background: green;
}
//子元素样式可以直接写在父样式里面
section{
height: 400px;
background: skyblue;
&:hover{
background: blue;
}
//在元素前面加元素。content：内容
&::before{
content: '11';
position: absolute;
width: 100px;
height: 100px;
background: yellow;
}
//在元素后面加元素。content：内容
&::after{
content: url(img/20230202015430200.ico);
position: absolute;
left: 100px;
width: 200px;
height: 200px;
background: red;
}
//媒体查询，窗口宽度小于300背景改成红色
@media screen and (max-width:300px){
background: red;
}
}
footer{
height: 200px;
background: black;
}
}
Example directory structure
Summarize
Reference link:
https://www.runoob.com/bootstrap/bootstrap-v2-less.html
https://www.bilibili.com/video/BV1i54y1U7zY/