LESS学习笔记

LESSCSS是什么？

一种动态样式语言，属于CSS预处理语言的一种。

LESS原理

LESS包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器（如koala），编译生成对应的CSS文件。在现有CSS语法的基础上，为CSS加入程序式语言的特性。

@变量名：值

@border-color : #b5bcc7; 
.div{border : 1px solid @border-color;}

.div{border: 1px solid #b5bcc7;}

适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于CSSRESET（重置样式表）

2.Mixins（混入）,指在一个CLASS中引入另外一个已经定义的CLASS，就像在当前CLASS中增加一个属性一样。

ParametricMixins（混入参数）

// 定义一个样式选择器:不带默认值
.border_01(@border_width){
	border:solid yellow @border_width;
}
//在另外的样式选择器中使用一定要传参数
.test_mix01{
	.border_01(10px);//.test_mix01{solid yellow 10px;}
}
// 定义另一个样式选择器:带默认值
.border_02(@border_width:10px){
	border:solid green @border_width;
}
//在另外的样式选择器中使用其他值要传参数，使用默认值不需要传参数
.test_mix02{
	.border_02;//使用默认值.test_mix02{border:solid yellow 10px;}
	.border_02(20px);//使用其他值.test_mix02{border:solid yellow 20px;}
}

3.变量：@argumentsMixins中一个很特别的参数，当Mixins引用这个参数时，该参数表示所有的变量，很多情况下这个参数可以省去很多代码。

.border_arg(@w:30px,@c:red,@blur:1px){
     border:@arguments;
} 
.test_arguments{
     .border_arg();
}

.test_arguments{30px #ff0000 1px;}

4.嵌套

写法是HTML中的DOM结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。&代表他上一级选择器对应的伪类

实例：考虑减少嵌套的层级，使得选择器匹配的时候提高效率。

<ul class="list">
	<li><a href="#">测试文字</a><span>2015-3-26</span></li>
	<li><a href="#">测试文字</a><span>2015-3-26</span></li>
	<li><a href="#">测试文字</a><span>2015-3-26</span></li>
</ul>

.list{
	width:600px;
	margin:30px auto;
	padding:0;
	list-style:none;

	li{
		height:30px;
		line-height:30px;
		background-color:pink;
		margin-bottom:5px;
	}
	a{
		float:left;
		&:hover{
			color:red;
		}
	}
	span{
		float:right;
	}
}

.list{
	width:600px;
	margin:30px auto;
	padding:0;
	list-style:none;
}
.list li{
	height:30px;
	line-height:30px;
	background-color:pink;
	margin-bottom:5px;
}
.list a{
	float:left;
}
.list a:hover{
	color:red;
}
.list span{
	float:right;
}

5.注释：

/*会被编译的注释*/

//不会被编译的注释

学习教程指引：→→

http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

http://www.imooc.com/comment/102