标签：
摘录less官网的解释：
LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
以上是less官方解释，说下本菜的理解：less类似css的jquery，一个为css封装的库。
less最终还是被编译成css被读取。
1、less定义变量：
/*声明变量*/ @var_width:120px; /*使用变量*/ div{ width:@var_width; }
这样一段less代码被编译后的css是：div{width:120px;}
2、混合：
@d_length:300px; /*定义变量*/ .d_1{ width:@d_length; height:@d_length; border:blue 1px solid; float:left; margin-left:20px; } .d_2{ .d_1; /*混合 使用.d_1全部样式*/ background-color:#808080; border-color:red; } .d_3{ .d_2; /*混合 使用.d_2全部样式*/ border-color:yellow; }
混合特性，less中可以重复使用样式。可以把每一个样式都看做一个封装好的函数，其他样式若需要便直接调用。
混合带参，less的混合和函数一样，也可以带参数，在遇到大量重复，但同一属性值又需不一样。这时就要用到混合参数。
/* 声明的带参混合 */ .div_style(@bg_color,@bor_color){ width:300px; height:300px; border:@bor_color 3px solid; background-color:@bg_color; float:left; margin-left:20px; } .d_1{ .div_style(#4491F6,#F63C18); } .d_2{ .div_style(#F8F00A,#4491F6); }
混合带参时，也可以直接给参数赋值，在使用时注意，定义带参混合若定义的参数有赋值使用时可以不传参，若定义的参数没赋值使用时就必须传参，若定义了参数值，使用时依然可以传参改变预先定义的参数值。
/* 声明的带参混合 */ .div_style(@bg_color,@bor_color,@wid:300px,@hei:100px){ width:@wid; height:@hei; border:@bor_color 3px solid; background-color:@bg_color; float:left; margin-left:20px; } /* 此时前两个参数必须传值，后两个则可传可不传。 */ .d_1{ .div_style(#4491F6,#F63C18); } .d_2{ .div_style(#F8F00A,#4491F6,600px,200px); }
标签：
原文地址：http://www.cnblogs.com/MirageFox/p/5591799.html
