less语法

# 简单Less用法

# 路径引入

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}


// Variables
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 属性代替

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

1
2
3
4
5
6

# 延伸选择器

# 初步用法

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}
输出

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 对比混入

示例 - 使用mixin：

.my-inline-block() {
    display: inline-block;
  font-size: 0;
}
.thing1 {
  .my-inline-block;
}
.thing2 {
  .my-inline-block;
}
输出
```less
.thing1 {
  display: inline-block;
  font-size: 0;
}
.thing2 {
  display: inline-block;
  font-size: 0;
}
.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}
输出
```less
.my-inline-block,
.thing1,
.thing2 {
  display: inline-block;
  font-size: 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# Mixins中的选择器

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

1
2
3
4
5
6
7
8

输出

button:hover {
  border: 1px solid red;
}

1
2
3

# 循环

# 属性循环

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

1
2
3
4
5
6
7
8

输出：

div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

1
2
3
4
5
6
7

# 类名循环

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

1
2
3
4
5
6
7
8

输出：

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12

# 合并

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

1
2
3
4
5
6
7

输出

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

1
2
3

# 父选择器

# 属性

a {
  color: blue;
  &:hover {
    color: green;
  }
}
结果是：
```less
a {
  color: blue;
}

a:hover {
  color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 类名

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

输出：

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

1
2
3
4
5
6
7
8
9

上次更新: 2024/01/18, 10:44:15

← http缓存 New date()浏览器时间兼容性→