<div class="box border">less中的变量</div>
<div class="box1">混合 - 可带参数的</div>
<div class="box2">混合 - 可带参数的,带默认值</div>
<div class="radius_test">混合</div>
<div class="box3">less匹配</div>
<div class="box_1">less运算</div>
<ul>
<li><a href="#">less嵌套</a></li>
<li><a href="#">less嵌套</a></li>
<li><a href="#">less嵌套</a></li>
<li><a href="#">less嵌套</a></li>
</ul>
<div class="test_arguments">@arguments</div>
@charset 'utf-8';
*{
font-size: 14px;
}
// less中的变量
// less中 想声明变量的话 一定要用@开头,例如:@变量名:值;
@test_width:200px;
.box{
width: @test_width;
height: 100px;
background: yellow;
.border;
}
// 混合
.border{
border: 5px solid pink;
}
// 混合 - 可带参数的
.border_02(@border_width){
border: solid blue @border_width;
}
.box1{
width: @test_width;
height: 100px;
.border_02(20px) !important;
margin-top: 30px;
background: red;
}
// 混合 - 可带参数的,带默认值
.border_03(@border_width:100px){
border: solid blue @border_width;
}
.box2{
width: @test_width;
height: 100px;
.border_03() !important;
margin-top: 30px;
background: red;
}
// 混合的例子
.border_radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.radius_test{
width:100px;
height: 100px;
margin-top: 20px;
text-align: center;
color: #fff;
background: #333;
.border_radius(50%) !important;
}
// 匹配模式,例子:定位
.pos(r){
position: relative;
}
.pos(a){
position: absolute;
}
.pos(f){
position: fixed;
}
.box3{
width: 100px;
height: 100px;
background: #555;
.pos(f) !important;
}
// less运算
@test_01:300px;
.box_1{
// width: @test_01 + 200; //可加单位,也可不加
width: (@test_01 - 200)*4;
background: blue;
height: 20px;
color: #fff;
}
// less嵌套
ul{
li{
list-style: none;
a{
// &代表他的上一层选择器
&:hover{
color: #333;
}
}
}
}
// @arguments变量:@arguments包含了所有传递进来的参数
.border_arg(@w:30px,@c:red,@xx:solid){
border: @arguments;
}
.test_arguments{
.border_arg(10px);
background: blue;
color: #fff;
width:~'calc(100% - 200px)';
}
// 避免编译,当遇到错误的css或者less不认识的语法,在字符串前加~
// 例如: width:~'calc(100% -200)';
// 会为所有混合所带来的样式,加上!important