LESS 使用指南

简介

Less 是一个Css 预编译器，意思指的是它可以扩展Css语言。
它的功能如允许变量(variables)，混合(mixins)，函数(functions) 和许多其他的技术，让Css更具维护性，主题性，扩展性。
Less 可运行在 Node 环境、浏览器环境和Rhino环境，同时也有3种可选工具供你编译文件和监视任何改变。
安装请至底部查看
本文参考了 w3cschool-less

使用-语言特性

1. Mixins （混合函数）
   Mixin是一组CSS属性，混合类似于编程语言中的函数，允许将一个类的属性用于另一个类，可以使用类或id选择器与CSS添加样式的方式来声明一个Mixin，它可以储存多个属性，并且可以在代码中复用。
   ex：声明一个Mixin，.sbox { color: #992e2e; }

   • 使用()不输出Mixins：定义的时候加上括号，在使用时生成后的文件中即不显示 .sbox() { color: #992e2e; }
   • 内部层级选择器：在Mixin内部可以使用选择器 .sbox { &:hover { color: #f00; } }
   • 命名空间妙用：命名空间用于在通用名称下对mixin进行分组。 使用命名空间可以避免名称冲突，并从外部封装mixin组。.sbox { .pic { xx } } .bbox { .pic { xx } }
   • !important：对所有继承的属性加上!important，.bbox { .sbox !important; }
   • 多个混合函数合并：如果有多个同名的混合函数在同层级下，他们会合并不会覆盖！
   • 代表所有参数的@arguments：绑定所有参数（代表了括号里所有内容），.sbox( @fz, @lh, @fm ) { font: @fz / @lh @fm; } .box { .sbox( 12px,20px,"Arial" ); }
   • 代表部分参数的@rest ：绑定部分参数，.sbox( @a, @rest... ) { box-shadow: @a @rest; } .box { .sbox ( 1px, 0px, #000 );}，别忘了加 ...
   • 在多个同名的混合函数中选定想要的那个（和if判断神似）：.tbox(one) { font-size: 12px; } .tbox(two) { font-size: 14px; } .ckbox { .tbox(two); }
   • 变量与函数混用：将变量以返回值的形式输出，.box() { @bgcolor #000; }，可能在一些场合有用吧，大概。。使用时注意变量的特性
   • 混合函数是可以任意嵌套的

2. 变量
   LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。
   LESS中声明变量的格式为“@变量名：变量值”。

   • 最常用的就是定义和引用
   • 选择器：编译时构建的。变量名称必须放在用@符号前缀的花括号（{}）内： @select: h2; @{select} { color: #992e2e; } -> h2 { color: #992e2e; }
   • url：@link: "http://xxx.com; .boxs { background: ("@link/pic.jpg"); } "
   • import：@link: "http://xxx.com; @import "@link/box.less";
   • 由值组成：@col: "#992e2e"; @color: "col"; .sbox { color: @@color; }
   • 延迟加载：延迟加载中，即使它们尚未声明，也可以使用变量（先使用，后声明）。.sbox { color: @color; } @color: "#992e2e";

3. 操作
   加减乘除可以对数字、颜色、变量任意操作，
   font-size: 24px/2*2+2-2;

4. 导入
   @import 可用于导入LESS或CSS文件的内容，默认是less，所以less文件可以不写后缀，比如 @import "less/box"，需加分号结尾，下同
   @import ( reference ) 用于导入内容，但会将成品样式排除在外（感觉很实用），注意括号内部最好加空格进行分隔，下同
   @import ( inline ) 将内容复制到输出css文件中，不进行处理，注意使用此参数时需加后缀
   @import ( optional ) 导入可选的文件，加了此参数后就算该文件不存在也不会报错
   @import ( once ) 在该文件中只导入一次，在该文件中执行第一次以后，还有导入的话，一概忽略
   @import ( less ) 不管后缀定义为什么，都把导入文件以less文件处理
   @import (css) 不管后缀定义为什么，都把导入文件以css文件处理
   @import (multiple) 可导入多次

5. 父选择器

• &代表父级元素，它的用法很多
• 直接用 & ，代表父级
• 和选择器一起用，& + & ，&:hover ，&:first-child
• 字符串拼接，&_lf ， 纯粹的字符串拼接
• 与产生列表中选择器的所有可能性排列，会用逗号分隔

  div,p {
    & + & {
      font-size: 12px;
    }
  }
  //生成 - >
  div + div,
  div + p,
  p + div,
  p + p {
      font-size: 12px;
  }
  

6. 注释
   // 编译后消失
   /**/ 编译后保留

7. 规则集
   规则集相当于定制作用域
   @rule: {
   //可以包含很多东西，比如变量，函数等
   };
   调用：

@fonts: {
  font-size: 12px;
  .sbox() { color: #992e2e; }
};
//使用时注意:  定义结尾花括号外要加分号，使用时要加括号分号，如果要引用混合函数还需另外定义引用
.box { @fonts(); .sbox; }

8. 扩展
   Extend是一个Less伪类，它通过使用:extend 选择器在一个选择器中扩展其他选择器的样式

.sbox {
    color: #992e2e;
    font-size: 12px;
}

.bbox:extend(.sbox) {
    line-height: 24px;
}
#生成
.sbox,
.bbox {
  color: #992e2e;
  font-size: 12px;
}
.bbox {
  line-height: 24px;
}

9. Mixin Guards
   用于匹配简单的值或参数数量，可以使用Guards，他与mixin声明相关联，Guard必须括在括号里，效果类似于 if 效果

• 比较运算符： = > < >= <=

  .minx1 ( @fz ) when ( @fz = 12 ) {
      font-size: 12px;
  }
  .minx2 ( @fz ) when ( @fz > 12 ) {
      font-size: 13px;
  }
  .minx3 ( @fz ) when ( @fz < 12 ) {
      font-size: 11px;
  }
  
  .boxs {
      .minx1(12);
      .minx2(14);
      .minx3(10);
  }
  //结果
  .boxs {
    font-size: 12px;
    font-size: 13px;
    font-size: 11px;
  }
  

• 逻辑运算符，使用 and 和 not

   .minx4 ( @fz ) when ( @fz > 11 ) and ( @fz < 15 ) and not ( @fz = 13 ) {
       font-size: @fz/1px;
   }
  
   .boxs2 {
       .minx4(12);
               .minx4(13);
   }
       //结果
   .boxs2 {
       font-size: 12px;
   }
  

• 类型检查函数 （返回值为 ture / false）
  常见的有：iscolor 、isnumber、isstring、iskeyword、isurl
  ex: .minx5 ( @color ) when ( iscolor(@color) ) { color: @color; }
  iskeyword不知道是啥，isurl在使用的时候有url才为true: isurl(url(...));

10. loops循环，允许多次执行一个语句或一组语句

.minx ( @num ) when ( @num > 2 ) {
    .minx( @num - 1 );
    font-size: @num * 12px;
}
.box {
    .minx(7);
}
//结果
.box {
  font-size: 36px;
  font-size: 48px;
  font-size: 60px;
  font-size: 72px;
  font-size: 84px;
}

11. 合并

• 用逗号合并相同的属性，语法是在属性名后分号前加上加号：.box { box-shadow+: 1px 1px #fff; box-shadow+: 0px 2px #000; } 结果是： .box { box-shadow: 1px 1px #fff, 0px 2px #000; }
• 用空格合并相同的属性，语法是在属性名后分号前加上加号和下划线，.box { font+_: 12px; font+_: "Microsoft YaHei"; } 结果是： .box { font: 12px "Microsoft YaHei"; }

未完待续