Less学习（2）（完结）

七、模式匹配与Guard表达式

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

 .mixin (dark, @color) {
     color: darken(@color, 10%);
 }
 .mixin (light, @color) {
     color: lighten(@color, 10%);
 }
 .mixin (@_, @color) {
     display: block;
 }

 .class1 {
     .mixin(light, #888);
 }
 .class2{
     .mixin(dark,#888);
 }

编译后的结果：

 .class1 {
   color: #a2a2a2;
   display: block;
 }
 .class2 {
   color: #6f6f6f;
   display: block;
 }

八、Guards

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

 .mixin (@a) when (lightness(@a) >= 50%) {
     background-color: black;
 }
 .mixin (@a) when (lightness(@a) < 50%) {
     background-color: white;
 }
 .mixin (@a) {
     color: @a;
 }

 .class1{
     .mixin(#999999);
 }
 .class2{
     .mixin(#333333);
 }

编译后的结果：

 .class1 {
   background-color: black;
   color: #999999;
 }
 .class2 {
   background-color: white;
   color: #333333;
 }

注意点：

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中比较常用，很多人认为它结构清晰。（我表示看着挺乱的啊= =到底是哪里有问题）

编译后的结果：

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

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

 .child, .sibling {
     .parent & {
         color: black;
     }
     & + & {
         color: red;
     }
 }

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

 .parent .child,
 .parent .sibling {
   color: black;
 }
 .child + .child,
 .child + .sibling,
 .sibling + .child,
 .sibling + .sibling {
   color: red;
 }

十、命名空间

 #bundle {
 2     .button () {
         display: block;
         border: 1px solid black;
         background-color: grey;
         &:hover { background-color: white }
     }
 }

 #header a {
     color: orange;
12     #bundle > .button;
 }

 .box{
     .hd(){
         width:100%;
         height:22px;
         line-height:22px;
     }
 }

 .footer{
     h3{
         .box >.hd;
     }
 }

编译后的结果：

 #header a {
   color: orange;
   display: block;
   border: 1px solid black;
   background-color: grey;
 }
 #header a:hover {
   background-color: #ffffff;
 }
 .footer h3 {
   width: 100%;
   height: 22px;
   line-height: 22px;
 }

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

变量可以用像 @{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()";
}

编译后的结果为：

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