Less

阅读更多

互联网技术发展太快了，想想前几年还在手动改一行行修改CSS文件。直至现在Less的出现，less支持变量，类似函数调用，使得CSS更加容易维护和编写。上手非常容易，官方也提供了详细的资料。

 

/* less学习备忘 */

/*1.一种注释，可以在css文件中显示*/
//另一种注释，不在css文件中显示

// 2.变量以@开始，正如php变量以$开始
@test_width:100px;

.border{
	border: solid 5px pink;
}

.content{
	background-color: red;
	width: @test_width;
	height: @test_width;

	.border;  // 混入
}


.radius(@myradius:20px){
	-webkit-border-radius:@myradius;
	-moz-border-radius:@myradius;
	border-radius: @myradius;
}


#rd{
	width: 100px;
	height: 100px;
	background-color: yellow;

	// 3.混入(类似函数调用)
	.radius();
}


// 4.匹配模式，相当于js中的if语句，if(top){}else if(bottom){}
.triangle(top,@w:5px,@c){
	// width: 0px;
	// height: 0px;
	// overflow: hidden;

	border-width: @w;
	border-color: transparent transparent @c transparent;
	border-style: solid;
}

.triangle(bottom,@w:20px,@c:red){
	border-width: @w+10;		// 5.变量可参与+-*/运算
	border-color: @c transparent transparent transparent;
	border-style: solid;
}

// 6.@_用于添加公共部分代码
.triangle(@_,@w:20px,@c:red){
	width: 0px;
	height: 0px;
	overflow: hidden;
}

.tangle{
	.triangle(bottom);
}


// 7.嵌套规则，非常实用的一个功能
.news{
	width: 300px;
	margin: 30px auto;
	padding: 0px;
	list-style: none;

	li{	// news li {}
		height: 30px;
		line-height: 30px;
		background-color: yellow;
		margin-bottom: 5px;
		padding: 0 10px;
	}

	a{
		float: left;

		&:hover{	// &: 相当于 news a:hover{}
			color: red;
		}
	}

	span{
		float: right;
	}
}


// 8.@arguments，参数比较多时，可直接用关键字@arguments代替
.border_arg(@s:solid,@w:5px,@c:red){
	border: @arguments;
}


.br{
	.border_arg();

	// 9.避免编译，直接在语句前加上~
	//width: calc(30px-5px);
	width: ~'calc(30px-5px)';
}

 

 更多介绍见：lesscss.net

 Less编译工具：koala-app.com/index-zh.html