条件表达式有了模式匹配之后是方便了很多，我们能根据不同的需求来匹配不同的混入，但更进一步的就是利用条件表达式来更加准确，更加严格的来限制混入的匹配，实现的方式就是利用了 when这个关键词。
清单 9. 利用条件表达式来控制模式匹配1
2
3
4
5
6
7
8
| .mixin (@a) when (@a >= 10) {
background-color: black;
}
.mixin (@a) when (@a < 10) {
background-color: white;
}
.class1 { .mixin(12) }
.class2 { .mixin(6) }
|
清单 10. 条件表达式生成的 CSS 代码1
2
3
4
5
6
| .class1 {
background-color: black;
}
.class2 {
background-color: white;
}
|
利用 When 以及 <, >, =, <=, >= 是十分简单和方便的。LESS 并没有停留在这里，而且提供了很多类型检查函数来辅助条件表达式，例如 iscolor、isnumber、isstring、iskeyword、isurl等等。
清单 11. 条件表达式中支持的类型检查函数1
2
3
4
5
6
7
8
| .mixin (@a) when (iscolor(@a)) {
background-color: black;
}
.mixin (@a) when (isnumber(@a)) {
background-color: white;
}
.class1 { .mixin(red) }
.class2 { .mixin(6) }
|
清单 12. 类型检查匹配后生成的 CSS 代码1
2
3
4
5
6
| .class1 {
background-color: black;
}
.class2 {
background-color: white;
}
|
另外，LESS 的条件表达式同样支持 AND 和 OR 以及 NOT 来组合条件表达式，这样可以组织成更为强大的条件表达式。需要特别指出的一点是，OR 在 LESS 中并不是用 or 关键字，而是用 ， 来表示 or 的逻辑关系。
清单 13. AND，OR，NOT 条件表达式1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .smaller (@a, @b) when (@a > @b) {
background-color: black;
}
.math (@a) when (@a > 10) and (@a < 20) {
background-color: red;
}
.math (@a) when (@a < 10)，(@a > 20) {
background-color: blue;
}
.math (@a) when not (@a = 10) {
background-color: yellow;
}
.math (@a) when (@a = 10) {
background-color: green;
}
.testSmall {.smaller(30, 10) }
.testMath1 {.math(15)}
.testMath2 {.math(7)}
.testMath3 {.math(10)}
|
清单 14. AND，OR，NOT 条件表达式生成的 CSS 代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .testSmall {
background-color: black;
}
.testMath1 {
background-color: red;
background-color: yellow;
}
.testMath2 {
background-color: blue;
background-color: yellow;
}
.testMath3 {
background-color: green;
}
|
命名空间和作用域LESS 所带来的变量，混入这些特性其实很大程度上避免了传统 CSS 中的大量代码重复。变量能够避免一个属性多次重复，混入能够避免属性集的重复。而且使用起来更加灵活，维护起来也方便了许多，只要修改一处定义而无需修改多处引用的地方。现在，让我们更进一步，当我定义好了变量和混入之后，怎么能更好的控制和运用它们呢，怎么避免和其他地方定义的变量及混入冲突？一个显而易见的想法就是像其他语言一样引入命名空间和作用域了。首先我们来看一个 LESS 的作用域的例子。
清单 15. 变量的作用域1
2
3
4
5
6
7
8
9
10
| @var: red;
#page {
@var: white;
#header {
color: @var;
}
}
#footer {
color: @var;
}
|
在这个例子里，可以看到 header 中的 @var会首先在当前作用域寻找，然后再逐层往父作用域中寻找，一直到顶层的全局作用域中为止。所以 header 的 @var在父作用域中找到之后就停止了寻找，最终的值为 white。而 footer 中的 @var在当前作用域没找到定义之后就寻找到了全局作用域，最终的结果就是全局作用域中的定义值 red。
清单 16. 变量作用域例子生成的 CSS 代码1
2
3
4
5
6
| #page #header {
color: #ffffff; // white
}
#footer {
color: #ff0000; // red
}
|
了解了作用域之后让我们再来看一下命名空间，我们可以用命名空间把变量和混入封装起来，避免和其他地方的定义冲突，引用起来也十分方便，只要在前面加上相应的命名空间就可以了。
清单 17. 命名空间的例子1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| @var-color: white;
#bundle {
@var-color: black;
.button () {
display: block;
border: 1px solid black;
background-color: @var-color;
}
.tab() { color: red }
.citation() { color: black}
.oops {weight: 10px}
}
#header {
color: @var-color;
#bundle > .button;
#bundle > .oops;
|
}
这里可以看出，我们利用嵌套规则在 #bundle中建立了一个命名空间，在里面封装的变量以及属性集合都不会暴露到外部空间中，例如 .tab(), .citation()都没有暴露在最终的 CSS 代码中。而值得注意的一点是 .oops 却被暴露在了最终的 CSS 代码中，这种结果可能并不是我们想要的。其实同样的例子我们可以在混入的例子中也可以发现，即无参的混入 .tab()是和普通的属性集 .oops不同的。无参的混入是不会暴露在最终的 CSS 代码中，而普通的属性集则会现在出来。我们在定义命名空间和混入时要小心处理这样的差别，避免带来潜在的问题。
清单 18. 命名空间例子生成的 CSS 代码1
2
3
4
5
6
7
8
9
10
| #bundle .oops {
weight: 10px;
}
#header {
color: #ffffff;
display: block;
border: 1px solid black;
background-color: #000000;
weight: 10px;
}
|
|
