版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/89473907
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node.JS 或浏览器端。
https://less.bootcss.com/ 快速入门
https://www.bootcdn.cn/less.js/ less加速器
一、变量（Variables）
<link rel="stylesheet/less" type="text/css" href="css/index.less"/>
<script src="https://cdn.bootcss.com/less.js/3.9.0/less.js"></script>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>index.less
@width:100px; //1>变量
@height:@width+20px;
@bg:red;
#d1{
width: @width;
height: @height;
background: @bg;
#bord(); //注意：在调用混合时，可以加括号也可以不加括号
}
#d2{
width: @width;
height: @height;
background:blue;
.border; //注意：在调用混合时，可以加括号也可以不加括号
}
//2>混合（Mixins）： 通用的属性集为一个选择器，然后在另一个选择器中去调用这些属性
.border,#bord{
border: 5px solid gold;
margin: 5px;
}
二、嵌套（Nesting）
<div id="d1">
第一层
<div id="d2">
第二层
</div>
<p class="txt">第二层The resulting <a href="index.html">code </a>is more concise,
<span>and mimics the structure of your HTML.</span></p>
</div>
nesting.less
@width:50%; //1>变量
@height:400px;
@bg:gray;
//& 符号的使用 — 如果你想写串联选择器，而不是写后代选择器，就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。
#d1{
width: @width;
height: @height;
border:10px solid @bg;
#d2{
font-size: 35px;
}
.txt{
color: red;
a{
color:black;
&:hover{ //鼠标悬停上 a:hover
text-decoration: none;
font-size: 25px;
color: cyan;
}
&:active{ //活动 a:active
color:blue;
}
}
span{
font-weight: bolder;
font-size: 12px;
color: darkmagenta;
}
}
}
