欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Less

程序员文章站 2022-04-27 22:20:55
...

互联网技术发展太快了,想想前几年还在手动改一行行修改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

 

 

相关标签: less