Less(Leaner Style Sheets 精简样式表) 是一种动态样式语言,属于 css 预处理器的范畴,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展,Less 既可以在 客户端 上运行 ,也可以借助 Node.js 在服务端运行。
初识less:less使用与html中相同的嵌套结构去写css样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/less">
* {
margin: 0;
padding: 0;
}
.father {
width: 500px;
height: 600px;
margin: auto;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
.son {
width: 300px;
height: 200px;
background-color: bisque;
}
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
</html>
上边的这种形式是采用的运行时编译,我们一般采用将less直接编译为css,然后引入css文件的方式。
在Hbuildx中下载插件less,右键点击less文件,选择外部命令,点击编译less,即可把less文件编译为css文件存放在相同路径下。
我们采用如下形式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/02.css">
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
将less整理为一个less文件:
* {
margin: 0;
padding: 0;
.father {
width: 500px;
height: 600px;
margin: auto;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
.son {
width: 300px;
height: 200px;
background-color: bisque;
}
}
}
然后利用插件编译为css文件,在html文件中引入即可:
* {
margin: 0;
padding: 0;
}
* .father {
width: 500px;
height: 600px;
margin: auto;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
}
* .father .son {
width: 300px;
height: 200px;
background-color: bisque;
}