Less学习（2）（完结）

七、模式匹配与Guard表达式

根据传入参数的不同，引入不同的属性集。

 1 .mixin (dark, @color) {
 2     color: darken(@color, 10%);
 3 }
 4 .mixin (light, @color) {
 5     color: lighten(@color, 10%);
 6 }
 7 .mixin (@_, @color) {
 8     display: block;
 9 }
10 
11 .class1 {
12     .mixin(light, #888);
13 }
14 .class2{
15     .mixin(dark,#888);
16 }

编译后的结果：

1 .class1 {
2   color: #a2a2a2;
3   display: block;
4 }
5 .class2 {
6   color: #6f6f6f;
7   display: block;
8 }

八、Guards

有条件的混合，关键词when引入了guard条件，如果符合条件则引入该属性集，规则类似媒体查询。

 1 .mixin (@a) when (lightness(@a) >= 50%) {
 2     background-color: black;
 3 }
 4 .mixin (@a) when (lightness(@a) < 50%) {
 5     background-color: white;
 6 }
 7 .mixin (@a) {
 8     color: @a;
 9 }
10 
11 .class1{
12     .mixin(#999999);
13 }
14 .class2{
15     .mixin(#333333);
16 }

编译后的结果：

1 .class1 {
2   background-color: black;
3   color: #999999;
4 }
5 .class2 {
6   background-color: white;
7   color: #333333;
8 }

注意点：

1、.mixin (@a) when (@a > 10), (@a < -10) { ... } 多个guard用逗号分隔，只要其中一个满足条件则为true

2、.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... } and在 guard 中加入额外的条件，都满足才为true

3、.mixin (@b) when not (@b > 0) { ... } 在when 前面加上not 是否定了when条件，即条件不满足才为true

九、嵌套规则

#header { color: black;
    .navigation { font-size: 12px }
    .logo { width: 300px;
        &:hover { text-decoration: none }
    }
}

嵌套规则在Less中比较常用，很多人认为它结构清晰。（我表示看着挺乱的啊= =到底是哪里有问题）

编译后的结果：

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

注意点：这里的&指它的父级选择器.logo ，&的高级用法，用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上。如：

1 .child, .sibling {
2     .parent & {
3         color: black;
4     }
5     & + & {
6         color: red;
7     }
8 }

这里的&指.child, .sibling，所以编译后的结果为：

 1 .parent .child,
 2 .parent .sibling {
 3   color: black;
 4 }
 5 .child + .child,
 6 .child + .sibling,
 7 .sibling + .child,
 8 .sibling + .sibling {
 9   color: red;
10 }

十、命名空间

 1 #bundle {
 2     .button () {
 3         display: block;
 4         border: 1px solid black;
 5         background-color: grey;
 6         &:hover { background-color: white }
 7     }
 8 }
 9 
10 #header a {
11     color: orange;
12     #bundle > .button;
13 }
14 
15 .box{
16     .hd(){
17         width:100%;
18         height:22px;
19         line-height:22px;
20     }
21 }
22 
23 .footer{
24     h3{
25         .box >.hd;
26     }
27 }

编译后的结果：

 1 #header a {
 2   color: orange;
 3   display: block;
 4   border: 1px solid black;
 5   background-color: grey;
 6 }
 7 #header a:hover {
 8   background-color: #ffffff;
 9 }
10 .footer h3 {
11   width: 100%;
12   height: 22px;
13   line-height: 22px;
14 }

十一、字符串插值和选择器插值

变量可以用像 @{name} 这样的结构，以类似 ruby 和 php 的方式嵌入到字符串中：

@base-url: "http://assets.fnord.com";
.bg{
    background-image: url("@{base-url}/images/bg.png");
}

编译后的结果：

.bg {
  background-image: url("http://assets.fnord.com/images/bg.png");
}

如果需要在选择器中使用 LESS 变量，只需通过使用和字符串插件一样的 @{selector} 即可

@name: blocked;
.@{name} {
    color: black;
}

编译后的结果为：

.blocked {
  color: black;
}

十二、避免编译

有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法。

要输出这样的值我们可以在字符串前加上一个 ~，例如：

.class {
    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

编译后的结果为：

1 .class {
2   filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
3 }

hi,我的新博客地址：ysha.me !!