Less（css预处理器）学习
less_2">less的优势
Less的使用方式
Less的使用
-
注释方式
- //不会编译到css中
- /**/会编译到css中
-
Less中的变量
- 定义属性值变量使用@开头，例如：@color:属性值;使用时直接@color使用
- 定义选择器、URL变量或属性变量定义方式不变（一般用不到），例如：@m:margin;使用时需要加上{}，@{m}
- 变量的作用域是块作用域
- 变量的延迟加载，在同一个作用域中如果定义多个相同的变量，它会将最后一个变量的值赋给属性。
-
Less的嵌套规则
-
嵌套和html的嵌套类似
less">.a{ .b{ } } //a设置的是class为a的样式，设置的是css选择器中.a .b选择到的区域样式即class为a中的所有class为b标签的标签。 -
&运算符直接嵌套是后端关系，&一般用在伪类和伪元素选择器上。
less">.a{ &:hover{ } } /*等价于css的.a:hover*/
-
-
Less的导入导出和css的一样
- @import
-
Less中的混合（mixin，以点开头,简单来说就是复制粘贴）
-
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
例子：
less">.a(){ color:red; } .b{ .a(); } .c{ .a() } //.a是一个样式的集合，混合就是在.b和.c中引入.a这个样式集合。可以在.a后面不加括号，它将仍在编译出的css中出现。在.a后加括号则使.b和.c中的.a都被.a中的内容替换，而.a不会出现在编译后的css中。 -
普通混合（不加括号的）
-
不带输出的混合（加括号的）
-
带参数的混合
less">.a(@color,@h,@w){ width:@w; height:@h; color:@color background-color:@color; } .a(red,100px,100px);//使用混合 -
带默认参数的混合
less">.a(@color:red,@h:100px,@w:100px){//默认值 width:@w; height:@h; color:@color background-color:@color; } .a();//使用混合不传参数使用默认值 -
命名参数混合
less">.a(@color:red,@h:100px,@w:100px){//默认值 width:@w; height:@h; color:@color background-color:@color; } .a(@h:500px);//使用混合,除了修改的h外其使用的是默认值 -
匹配模式（就是给混合添加上一个标识符，来提高代码的复用性）
less">.a(L,@width,@height){//L为标识符，@width和@height为变量 //color:red; 可复用 width:@width; height:@height; } .a(R,@width,@height){//L为标识符，@width和@height为变量 //color:red; 可复用 width:@width; height:@height; } .a(@_){//与匹配模式的混合名称相同，在使用匹配模式的任一混合时会自动加入此混合中的less属性 color:red; //可复用部分 }注意： IE的样式不兼容一般可以使用overflow:hidden解决
-
arguments（实参列表，一个伪数组）是混合的所有参数
less">.a(@1,@2,@3){ border:@arguments; } .b{ .a(1px, solid, red);//将整个参数列表传入border，border:1px, solid, red; }
-
-
Less的计算
- 可以使用加减乘除算数运算，运算的数字只需要一个数字带单位即可。
-
Less的继承（性能高于混合，灵活低于混合，不可以带参数）
- :extend(无参数的混合)
- :extend(无参数的混合,all)连带所有的混合的状态
-
Less避免编译
待续。。。。。
