1、html代码如下
<div class="order2">
我是订单页面
<ul class="list">
<li><a href="#">测试的嵌套<span> 2017-08-16</span></a></li>
<li><a href="#">测试的嵌套<span>2017-08-16</span></a></li>
<li><a href="#">测试的嵌套<span>2017-08-16</span></a></li>
<li><a href="#">测试的嵌套<span>2017-08-16</span></a></li>
<li><a href="#">测试的嵌套<span>2017-08-16</span></a></li>
<li><a href="#">测试的嵌套<span> 2017-08-16</span></a></li>
</ul>
<div class="sanjiao"></div>
<div class="box_03"></div>
</div>
2、css 代码如下:
<style scoped lang="less">
// 1、less中的变量,例如:width: @test_width;变量的使用
@test_width: 100%;
.order {
margin-top: 100px;
width: @test_width;
height: 100px;
line-height: 100px;
background-color: red;
// .border;
.border_02(30px);
}
/**2、混合的使用*/
// 2、less中的混合;例如:.border; 具体的使用
.border{
border: solid 5px pink;
}
// less中混合的使用,具有order的所有属性,可以在添加额外的属性,例如:margin-left: 100px;
.order2{
.order;
margin-left: 10px;
}
// less中的混合 是可以带参数的
.border_02(@border_width){
border: solid yellow @border_width;
}
// 混合例子 带参数
.test_hunhe{
.border_02(30px);
}
// 混合设置默认值,而且有参数; 10px是默认值
.border_03(@border_width:10px){
border: solid green @border_width;
}
// 使用混合默认值
.test_hunhe_03{
.border_03();
}
/**3、匹配的使用*/
.sanjiao{
// width: 0;
// height: 0;
// overflow: hidden;
// border-width: 10px;
// border-color: red transparent transparent transparent;
// border-style: solid dashed dashed dashed;
.trianle(top); // 匹配的使用
}
// 通过匹配 实现三角 上下左右
.trianle(top,@w:5px,@c:#ccc){
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.trianle(bottom,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.trianle(left,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
.trianle(right,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
// 无论匹配上面的四个方向的那个方向,都要带上下面这个
.trianle(@_,@w:5px,@c:#ccc){
width: 0;
height: 0;
overflow: hidden;
}
// 匹配模式定位 定位例子
.pos(r){
position: relative;
}
.pos(a){
position: absolute;
}
.pos(f){
position: fixed;
}
.pipei{
width: 200px;
height: 200px;
background-color: green;
.pos(r);
}
/**4、less中的运算使用*/
@test_01:300px;
.box_03{
width: (@test_01 - 200)*2;
height: 100px;
background-color: green;
}
.list{
width: 600px;
margin: 30px auto;
padding: 0;
list-style: none;
li{
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
}
a{
float: left;
// & 代表上一层选择器
&:hover{
color:green;
}
}
span{
float: right;
}
}
// 避免运算 ~'calc(300px-30px)';
.test_06{
width: ~'calc(300px-30px)';
}
</style>