Less极简教程

Less

Less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 既可以在客户端上运行，也可以借助Node.js在服务端运行。
Less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/

Less编译工具

koala 官网:www.koala-app.com

Less中的注释

以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

Less中的变量

使用@来申明一个变量：@accentColor：pink;

作为普通属性值只来使用：直接使用@pink
作为选择器和属性名：#@{selector的值}的形式
作为URL：@{url}
变量的延迟加载：变量是在块级作用域，整个块编译后才给其中变量赋值，即块中后定义的变量会覆盖前边的。如下例子，margin会被编译为200

#wrap {
@v: 100
margin: @v
@v: 200
}

Less中的嵌套规则

基本嵌套规则: 嵌套内部编译后会加空格，例如：

#a {
  margin: 10
  .b {
    padding: 20
  }
}

编译后

#a {
  margin: 10
}
#a .b {
  padding: 20
}

&的使用：需要同级嵌套场景。例如, :hover

#a {
  .b {
    
    &:hover {
      
    }
  }
}

Less中的混合（mixin）

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

普通混合：编译后定义的混合(本例中.center )会输出到css文件中

.center {
  text-align: center
}
.a {
  .center
}

不带输出的混合：混合后加一个括号()，编译后定义的混合(本例中.center )不会输出到css文件中

.center() {
  text-align: center
}
.a {
  .center
}

带参数的混合：可以在定义时加入参

.m($a, $b) {

}

带参数并且有默认值的混合

.m($a:10px, $b:pink) {

}

命名参数：对于多参数混合的调用，可以通过@b:red的方式指定要给那个参数赋值

.m($a:10px, $b:pink) {

}
.n {
  .m(@b:red)
}

匹配模式：根据参数匹配对应的Mixin，如果有公共的属性可以顶一个mixin第一个参数是@_，所有其他mixin编译时会将这个mixin编译进去

.a(@_) {
  width: 100px;
}
.a(right, @m) {
  margin-right: @m;
}
.a(left, @m) {
  margin-left: @m;
}
.x {
  .a(right, 20px)
}
.y {
  .a(left, 15px)
}

arguments变量：用@arguments表示mixin的所有入参

.b(@a, @b, @c) {
  border: @arguments
}
.c {
  .b(1px, solid, black)
}

Less运算

在Less中可以进行加减乘除的运算，计算双方只有一方带单位(px)即可

.a {
  width: (100 + 100px)
}

Less继承

.a {
 
}
.b {
  $:extend(.a)
}

性能比混合高
灵活度比混合低: 不支持参数

避免编译

通过~""将不想被编译的Less代码放到双引号中，这样编译器会讲内容默认输出到编译后的css文件中