摘录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); }
时间: 2024-10-10 06:09:40