Less

发表于   |  

css扩展语言，兼容css，因此在less文件里即可使用扩展的特性也可使用标准css

定义变量

1
2
3
@color:red

#header{background-color:@color}

定义函数

1
2
3
.border-color(@color){
	border-color:@color
}

使用：

1
2
3
.header{
	.border-color(red)
}

混合

1
2
3
4
.border{
  border-color:red;
  border-top:solid 1px black;
}

其他属性集合内部使用：

1
2
3
4
#menu{
  color:red;
  .border;
}

嵌套

标准css写法

1
2
3
4
5
6
7
8
9
#header{
  color:black;
}
#header .navigation{
  font-size:12px;
}
#header .logo{
  width:300px;
}

less的写法

1
2
3
4
5
6
7
8
9
#header{
  color:black;
  .navigation{
    font-size:12px;
  }
  .logo{
    width:300px;
  }
}

运算

任何数值，颜色和变量都可以进行运算

1
2
3
@base:5%;
@filler:@base * 2;
@other:@base + @filler

作用域

less中变量的作用域，首先会在局部查找，如果没有再去父作用域查找

1
2
3
4
5
6
7
@var:red
#header{
  @var:white;
  #title{
    color:@var;//white
  }
}

导入

1
@import "library.less";

函数

less提供了许多的用于颜色转换，字符串处理，运算等的函数。

1
2
3
4
@base:0.5;
.header{
  width:percentage(@base);//50%
}