less编译为css引入到html中
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>你好啊!</h1>
</header>
<footer>
<h1>谢谢夸奖!</h1>
</footer>
</body>
</html>
style.less
@green:#801f77;
@baise:white;
header,footer{
background: @green;
h1{
color: @baise;
}
}
style.css
header,
footer {
background: #801f77;
}
header h1,
footer h1 {
color: white;
}
//作为选择器和属性名的变量
@kuandu:width;
.@{kuandu}{
@{kuandu}:150px;
}
//作为URL的变量
@imgurl: "https://www.baidu.com/img/";
header {
background: @green url("@{imgurl}bdlogo.png");
height: 300px;
}
//定义多个相同名称的变量时
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var; //这是的值是3
@var: 3;
}
one: @var; //这是的值是1
}