首页 > 代码库 > Less入门到上手——前端开发利器
Less入门到上手——前端开发利器
摘录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);}
Less入门到上手——前端开发利器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。