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();
}