Less&Sass部分讲解

今天我们来聊聊两款Css预编译处理语言的使用

变量的声明与使用

 LESS  										SASS
//声明一个Css变量
@fontSize:10px;								$fontSize:10px;
//使用变量
.test{										.test{
	font-size:@fontSize;						font-size:$fontSize;
}											}		

编译Result
.test{
	font-size:10px;
}	

mixin的声明与使用

LESS                                        SASS
//声明mixin
.bgColor{									@mixin bgColor{
	background-color:#949494;					background-color:#949494;
}											}
//使用mixin
.test{										.test{
	.bgColor();									@include bgColor();
}											}

编译Result
.test{
	background-color:#949494;
}

extend的声明与使用

LESS										SASS
//声明一个将要被继承的Css
.commmCss{									.commmCss{
	font-family:Arial;							font-family:Arial;
}											}
//使用extend
.test:extend(.commCss){						.test{
	font-size:17px;								@extend .commmCss;
}											}

编译Result
.test{
	font-family:Arial;
}
//	这里可能有人会问，那么extend和mixin没啥差别吖，别着急，接着往下面看

?????????华丽分割线?????????????????
以下内容可能引起部分网友不适，请慎重查看

有了上面的基础，接下来分享一些更好用的

LESS									SASS
//变量与mixin结合一起来用
@bgColor:#949494;						$bgColor:#949494;
@fontSize:18px;							$fontSize:18px;

.commonCss(@bgColor,@fontSize){			@mixin commonCss($bgColor,$fontSize){
	background-color:@bgColor;				background-color:$bgColor;	
	font-size:@fontSize;					font-size:$fontSize;
	color:gray;								color:gray;
}										}

.test{									.test{
	font-family:Arail;						font-family:Arial;
	.commonCss(@bgColor,@fontSize);			@include commonCss($bgColor,$fontSize);
}										}

编译Result
.test{
	font-family:Arial;
	background-color:#949494;
	font-size:18px;
	color:gray;
}