less

less基本语法

@width:300px;
@height:@width/2;
@primaryColor:red;

@import "./var.less";
@import "./button.less";
@import "./home.less";

#header{
	width:@width;
	height: @height;
	background: @primaryColor;
}
/* 变量的延迟加载 */
@var:0;
.class{
@var:1;
    .brass{
		@var:2;
		three:@var; //3
		@var:3;
	}
	one:@var;
}
/*  &:hover: &表示平级别*/
#wrap{
	position:relative;
	 .inner{
		 background:@color;
	 }
	 &:hover{
		 background: pink;
	 }
}
/* less定义混合 */
.juzhong(@w:10px,@h:10px,@c:pink){
	width: @w;
	height:@h;
}
#wrap{
	position:relative;
	width: 300px;
	 .inner{
		 .juzhong(100px,100px,pink);
	 }
	 .inner2{
		 .juzhong(200px,200px,pink);
	 }
	 .inner2{
	 	.juzhong(@c:black); //命名参数
	 }
}
/* less画不同方向三角形 */
03.less
@import "./triangle.less"
#wrap .sjx{
	.triangle(L,40px,pink) //自动调用.triangle(@_){
}
triangle.less
.triangle(@_){
	width:0px;
	height:0px;
	overflow:hidden ;
}
.triangle(L,@w,@c){
	width:0px;
	height:0px;
	border-width:@w;
	border-style:dashed solid dashed dashed;
	border-color: transparent @c transparent transparent;
	overflow: hidden;
}
.triangle(R,@w,@c){
	width:0px;
	border-width:@w;
	border-style:dashed solid dashed dashed;
	border-color: transparent transparent transparent @c;
	overflow: hidden;
}
/* less arguments */
.border(@1,@2,@3){
	border:@arguments;
}
#wrap .sjx{
	.border(1px,solid,black)
}
/* less 计算 */
#wrap .sjx{
	width:(100 + 100px)
}
/* less 继承  */