less教程:http://www.bootcss.com/p/lesscss/
less中文网:http://less.bootcss.com/
1.环境搭建
引入自己的less文件style.less(和css引入方式类似),
之后引入下载的less.js文件
2.less语法
2.1 变量
//定义变量color
@color: #4D926F
#header{
color:@color;
}
h2{
color:@color;
}
相应的css如下
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
2.2 混合
可以定义一个样式的函数,在不同元素中调用。
//使用.方法名(参数名:值)来定义一个可以复用的方法。也可以不传参,不需要小括号及其内容即可
.rounded-corners(@radius:5px){
border-radius:@radius;
-weblit-border-radius:@radius;
-moz-border-radius:@radius;
}
#header{
.rounded-corners;
}
#fotter{
//传了参数会相应的改变变量值@radius
.rounded-corners(10px);
}
css如下:
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
2.3 嵌套
我们可以在一个选择器中嵌套另一个选择器来实现继承。
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
对应的css
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
2.4 函数和运算
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
相应的css
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
2.5 模式匹配
1). 根据参数值匹配
//定义了三个mixin,参数不同,根据参数确定调用哪一个
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
//@_表示所有都匹配
.mixin (@_, @color) {
display: block;
}
//会调用第二个和第三个
@switch: light;
.class {
.mixin(@switch, #888);
}
css
.class {
color: #a2a2a2;
display: block;
}
2). 根据表达式匹配
- 关系运算符
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
css
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
- 基于值的类型
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }
- 多个条件
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
.mixin (@a) when (@a > 10), (@a < -10) { ... }
- not关键字
.mixin (@b) when not (@b > 0) { ... }