less使用笔记

<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