LESS学习笔记

[size=large][b]LESS CSS是什么？[/b][/size]
一种动态样式语言，属于CSS预处理语言的一种。
[size=large][b]LESS 原理[/b][/size]
LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器（如koala），编译生成对应的 CSS 文件。在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

[size=medium]1.[b]自定义[color=blue]变量[/color][/b][/size]，变量可以在全局样式中使用，变量使得样式修改起来更加简单。

@变量名：值

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

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

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

[size=medium]2.[color=blue][b]Mixins（混入）[/b][/color][/size],指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。
[color=blue][b]Parametric Mixins（混入参数）[/b][/color]

// 定义一个样式选择器:不带默认值
.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;}
}

[size=medium]3.[color=blue][b]变量：@arguments[/b][/color][/size] Mixins 中一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下这个参数可以省去很多代码。

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

.test_arguments{30px #ff0000 1px;}

[b][size=medium]4.嵌套[/size][/b]
写法是 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;
}

[b][size=medium]5.注释：[/size][/b]
[color=green] /*会被编译的注释*/
//不会被编译的注释 [/color]
学习教程指引：→→
[url]http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/[/url]
[url]http://www.imooc.com/comment/102[/url]