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文件中
网友评论