less学习笔记六

一、Mixins as Functions，混合类作为函数

定义在一个混合类A中的变量Vs和混合子类Ms是可见的，可以在调用者的作用域内使用。但有一个例外，如果调用者中包含相同名称的变量，那么A中的变量不会被复制过去。只有出现在调用者本地作用域内的变量才是被保护的，继承自父作用域的变量会被重写。

.mixin() {
  @width:  100%;
  @height: 200px;
}

.caller {
  .mixin();
  width:  @width;
  height: @height;
}

/**outputs**/
.caller{
  width: 100%;
  height: 200px;
}

混合类中的变量可以看做混合类函数的返回值

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}
/**outputs**/
div {
  padding: 33px;
}

定义在调用者作用域中的变量不能被重写，但是调用者父作用域中的变量是不受保护的，可以被重写。

二、Passing Rulesets to Mixins，传递规则集给混合类

允许包含一个css块，定义在混合类中。

分离的规则集合是一组css属性、嵌套规则集、媒体声明或者其他存储在变量中的内容。你可以把它放进一个规则集中或者别的结构中，然后它的所有属性都会复制过去。也可以将它用作一个混合类参数，使用变量参数传值的方式给它传值。

// declare detached ruleset
@detached-ruleset: { background: red; };

// use detached ruleset
.top {
    @detached-ruleset(); 
}

/**outputs**/
.top {
  background: red;
}

分离的规则集被调用时后面的圆括号()是必须的，调用@detached-ruleset;将不会起作用。

当你需要定义一个混合类，用来抽象出包含一块媒体查询代码，或者一个浏览器不支持的类名，这会非常有用。规则集传入混合类参数中，包含所有的内容。

.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200) { @rules(); }
  html.lt-ie9 &                       { @rules(); }
}

header {
  background-color: blue;

  .desktop-and-old-ie({
    background-color: red;
  });
}

/**outputs**/
header {
  background-color: blue;
}
@media screen and (min-width: 1200) {
  header {
    background-color: red;
  }
}
html.lt-ie9 header {
  background-color: red;
}

三、Mixin Guards，混合类条件

它与mixin声明相关联，并包括附加到mixin的条件。 每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。 LESS使用Guards的mixins而不是if / else语句，并执行计算以指定匹配的mixin。

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

/**outputs**/
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

Guard Comparison Operators,比较运算

 运算符有 >, >=, =, =<, <，关键字true是唯一的真值，以下两个写法是等价的

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

.truth (@a) when (@a) { font-size:70px; }
.truth (@a) when (@a = true) { font-weight:1000; }

.section{
    .truth(true);//true以外的任何值都会被认为false,无法引用到混合类
}

/**outputs**/
.section {
  font-size: 70px;
  font-weight: 1000;
}

Guard Logical Operators，逻辑运算符

语法基于CSS media queries.使用关键字and来连接条件语句。

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

可以使用逗号,或者or运算符来分割条件语句，任何一个条件得到的值为真时，则该混合类匹配。以下两种写法等价

.mixin (@a) when (@a > 10), (@a < -10) { ... }
.mixinP (@a) when (@a > 10)or(@a < -10) { background:red; }

使用关键字not，来做“非”运算

.mixin (@b) when not (@b > 0) { ... }

Type Checking Functions，类型校验函数

如果你想通过参数值的类型来匹配混合类，可以使用is函数

.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }

常用is函数：

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

单位判断函数：

• ispixel
• ispercentage
• isem
• isunit

 default()函数，用在其他混合类不匹配时

.mixin (@a) when (@a > 0) { ...  }
.mixin (@a) when (default()) { ... } // matches only if first mixin does not, i.e. when @a <= 0