less

less

是一种动态样式语言，属于css预处理的范畴， 他扩展了CSS语言，
增加了变量、mixin、函数等特性，使CSS更易维护和扩展
less既可以在客户端上运行，也可以借助nodejs在服务端上运行
less中文网 http://lesscss.cn

less 编译工具

koala 官网：www.koala-app.com

less中文的注释

以//开头的注释，不会编译到css文件中去
以/**/包裹的注释会被编译到css文件中去

less中的变量

使用@来声明一个变量：@pink：pink
1、作为普通属性值来使用：直接使用@pink
2、作为选择器和属性名：得用花括号包起来 #{selector的值}的形式
3、作为url也一样：@{url}
4、变量的延迟加载：less会把里面的样式加载完后再渲染变量 变量是块级作用域的

@pink:pink;
@{mg}:margin;
@{div}:#div;
@{div} {
	color:@pink;
	@{mg}:0 auto;
}

less嵌套

1、基本嵌套规则
2、@的使用

less的混合mixin

混合就是将一系列属性从一个规则引入到另一个规则集的方式
1、普通混合
2、不带输出的混合
3、带参数的混合
4、带参数并且有默认值的混合
5、命名参数 匹配模式
6、arguments变量

混合以.开头 后面不加括号会把混合的样式也一起输出，加了括号就不会把混合原来的样式输出

/* 带参数的混合 */
.hunhe(@w,@h,@c){
	width：@w;
	height:@h;
	color:@C;
}
#div {
	.hunhe(100px,200px,red)
}

/* 带默认值参数的混合 */
.hunhe(@w:100px,@h:200px,@c:red){
	width：@w;
	height:@h;
	color:@C;
}
#div {
	.hunhe()
}
/*如果只想改变三个值中的其中一个  这就是命名参数*/
#div {
	.hunhe(@c:blue)
}
/*匹配模式 可以通过传递参数来改变它混合的行为*/
.hunhe(dark; @color) {
  color: darken(@color, 10%);
}
.hunhe(light; @color) {
  color: lighten(@color, 10%);
}
/* 第一个参数带@_的 运用这个混合的时候都会首先解析他 */
.hunhe(@_; @color) {
  display: block;
}
@color-new: light;
#div {
  .mixin(@color-new; #888);
}

/*生产的css*/
#div {
	 color: #a2a2a2;
  	display: block;
}
/*arguments*/
.hunhe(@w,@style,#c) {
	border:@arguments;
}
#div {
	.hunhe(1px,solid,red)
}

less的继承 extend

混合就是复制粘贴 多次引用同样的混合可能会产生很多同样的代码，如一个div下的p标签和div标签，样式一样 只是color不一样 如果引用同样的混合，就会产生一些重复代码，
运用继承就不会，但是继承性能好，扩展性不好，不能用变量，混合性能没有继承好，但扩展性好

混合就是复制粘贴，继承就是把同样样式的标签用逗号隔开合并

.hunhe() {
	width:100px;
	height:100px;
}
.inner1 {.hunhe()}
.inner2 {.hunhe()}
//混合编译为以下  代码重复
.inner1 {
	width:100px;
	height:100px;
}
.inner2 {
	width:100px;
	height:100px;
}
.hunhe{
	width:100px;
	height:100px;
}
.hunhe:hover {
	width:200px;
}
// 要想把hover样式这些运用上来 得添加all 不然只继承单独的.hunhe   继承是个类 没有括号 混合是个集合
.div {
	&:extend(.hunhe all)
	&:nth-child(1){
		color:red;
	}
	&:nth-child(2){
		color:blue;
	}
}
.hunhe,
.div {
	width:100px;
	height:100px;
}
.hunhe,
.div:hover {
	width:200px;
}
.div:nth-child(1){
	color:red;
}
.div:nth-child(2){
	color:blue;
}

less的计算

.div {
	width:(100 + 100px)
}
/*只要有一个有单位就可以了 */
.div {
	width:200px;
}

less避免编译

.div {
	width:cacl(100 - 20px)
}
/*编译为 */
.div {
	width:cacl(80px)
}
/*cacl本来就是css里面的计算函数 不用编译 所以加一个波浪号家一个引号 就可以避免编译了*/
.div {
	width:~"cacl(100 - 20px)"
}
/*编译为 */
.div {
	width:cacl(100 - 20px)
}