less语法基础

Posted on Edited on

Variables

less定义变量的符号是@，sass定义变量符号是$。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@images: "../img";
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}
@property: color;
.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}
@mySelector: banner;
.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

Mixins

less的mixin比sass更简洁。 

1
2
3
4
5
6
7
.a, #b {color: red;}
.mixin-class {
  .a; // 等价于 .a();
}
.mixin-id {
  #b();
}
1
2
3
4
5
6
7
8
9
10
.my-mixin { // 会输出在 css 中
  color: black;
}
.my-other-mixin() { // 不会输出在 css 中
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
.border-radius(@radius: 5px) {
  border-radius: @radius;
}

.mixin() {
  @width:  100%;
  @height: 200px;
}
.caller {
  .mixin();
  width:  @width;
  height: @height;
}

Extend

1
2
3
4
5
6
7
8
9
10
.a:extend(.b) {}
// the above block does the same thing as the below block
.a {
  &:extend(.b);
}

.e:extend(.f) {}
.e:extend(.g) {}
// the above an the below do the same thing
.e:extend(.f, .g) {}

Import

1
@import 'reset'; // reset.less