less基本语法

less变量定义 @变量名:值;

less 语法

@color:red;
@basefont:12rem;
@hsize:12px;
div{
    color:@color;  
    font-size:@basefont + 2;  /* 1、+ - * / 运算符两边要有空格 2、若一个运算数有单位则结果是这个为准 2、若两个都有则结果以第一个运算数单位为准*/
    height:@hsize + 4;
	span{  /* 子元素嵌套*/
	     color:blue; 
	};
	&:hover{/* &表示父元素本身或伪类*/
		color:green;
	}
}  
/*less编译成css*/
div {
color: red;
font-size: 14rem;
height: 16px;
}
div span {
color: blue;
}
div:hover {
color: green;
}

  

posted @ 2020-04-02 09:13  howhy  阅读(220)  评论(0)    收藏  举报