less学习笔记4-语言特性（mixins）

花了这两天上班的空闲时间把mixins的大部分的相关内容写完了，但是还有两小块内容还没写，预计放在下一篇当中，下一篇可能在明天或者后天出。
看了下还是觉得把剩下的内容放进这里会好一点，不然下一篇的主题就有点乱，注意看更新的内容（会标注出来）。

---

混入（mixins）

从已有的样式中"mix-in"属性

你可以混入class选择器和id选择器：

.a, #b{
    color: red;
}
.mixin-class{
    .a();
}
.mixin-id{
    #b(); 
}
编译为：
.a, #b{
    color: red;
}
.mixin-class{
    color: red;
}
.mixin-id{
    color: red;
}

注意当你使用mixin的时候，括号是可选的。

.a();
.a;
//上面两个语句编译后是相同的

无输出的mixin（not outputting the mixin）

如果你想创建一个mixin但是不想这个mixin输出到样式表中，那么你可以在mixin后面加上括号（）。

.my-mixin{
    color: black;
}
.my-other-mixin(){
    background: white;
}
.class{
    .my-mixin;
    .my-other-mixin;
}
编译为：
.my-mixin{
    color: black;
}
.class{
    color: black;
    background: white;
}

选择器 in mixins

mixins 不仅能包含样式属性，还能包含选择器。

.my-hover-mixin(){
    &:hover{ //伪类选择器
        border: 1px solid red;
    }
}
button{
    .my-hover-mixin();
}
编译为：
button:hover{
    border: 1px solid red;
}

命名空间

如果你想要mixin一个结构复杂的选择器中的属性，你可以累积多个id或者class的选择器。

#outer{
    .inner{
        color: red;
    }
}
.c{
    #outer > .inner;
}

>和空格都是可选的

#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();

你可以将你的mixins放在id选择器的下级，这样可以保证不会和其他库冲突。

#my-library{
    .my-mixin(){
        color: black;
    }
}
.class{
    #my-library > .my-mixin();
}

命名空间监控（guarded namespaces）

如果命名空间设置了监控，只有监控的条件判断为真，mixins才会被定义声明。命名空间的监控和mixin的监控是相同的，所以下面两个mixins编译结果一样。

#namespaces when (@mode=huge){
    .mixin(){ ... }
}
#namespace{
    .mixin() when (@mode=huge){ ... }
}

default函数是对于所有的嵌套命名空间和mixin都会假定有一个相同的值。下面的mixin将不会被编译，因为其中一个监控的条件判断必定为假：

#sp_1 when(default()){
    #sp_2 when(default()){
        .mixin() when not(default()){ ... }
    }
}

关键词 "! important"

在mixin后面使用关键词 "! important"，将会让mixin里面的所有属性都继承 "! important"：

.foo(@bg: #f5f5f5, @color: #999){
    background: @bg;
    color: @color;
}
.unimportant{
    .foo();
}
.important{
    .foo() !important;
}

编译为：
.unimportant{
    background: #f5f5f5;
    color: #999;
}
.important{
    background: #f5f5f5 !important;
    color: #999 !important;
}

参数混入（parametric mixins）

mixins可以带参数。mixins会将传入选择器的变量进行参数混入。

.border-radius(@radius){
    -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
                 border-radius: @radius;
}

下面我们就可以将其混入规则中：

#header{
    .border-radius(4px);
}
.button{
    .border-radius(6px);
}

参数混入所带的参数可以设置默认值：

.border-radius(@radius: 5px){
    -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
                 border-radius: @radius;
}

我们就可以直接使用：

#header{
    .border-radius;//将会设置5px的圆角
}

你也可以使用不带参数的参数混入。如果你不想把该mixin编译显示在样式表中，但是又想要将mixin里面的属性添加到其他的样式规则中时，这个将会非常有用。很容易注意到，其实这个就是我们上面讲到的“无输出的mixin（not outputting the mixin）”。

.wrap(){
    text-wrap: wrap;
    word-wrap: break-word;
}
pre{ .wrap }

编译为：
pre{
    text-wrap: wrap;
    word-wrap: break-word;
}

多参数的mixins

参数可以使用分号";"或者逗号","进行分隔，不过推荐使用分号";"。逗号","有两种含义，它可以被解释成mixin的参数分隔符或者是样式表的分隔符。在mixin分隔符使用逗号","会导致无法使用逗号","作为css的参数分隔符。另一方面，如果编译器只要在mixin调用或者声明处发现到一个分号";"，就会认定参数是使用分号作为分隔符，所有的逗号都是属于样式表的，不会当成mixin的分隔符：

• 具有两个参数，并且参数中含有逗号的情况：

.name(1,2,3 ; some,else)

• 具有三个参数，每个参数包含一个数字：

.name(1,2,3)

• 使用假的分号去创建mixin，该mixin具有一个用逗号去分隔样式的参数：

.name(1,2,3 ;)

• 逗号分隔默认值：

.name(@param1: red , blue)

定义多参数mixin的时候，参数的名字重复和用数字做参数是不符合要求的。less会使用所有可以使用的属性，如果你使用带有一个参数的mixin: .mixin(green);，那么所有符合条件的mixin将会被使用。
注：符合的条件为：该mixin所需参数为一个的就会被使用，注意不是参数为一个的mixin，而是所需参数为一个的mixin。因为参数可以设置默认值，带有默认值的参数不是必需的，不带默认值的参数是必需的。

.mixin(@color){
    color-1: @color;
}
.mixin(@color; @padding: 2){
    color-2: @color;
    padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2){
    color-3: @color;
    padding-3: @padding;
    margin: @margin @margin @margin @margin;
}
.test{
    .mixin(#999);
}

编译为：

.test{
    color-1: #999;
    color-2: #999;
    padding-2: 2;
}

参数命名

使用mixin的时候会通过参数名称进行参数匹配而不是参数定义的位置。

.mixin(@color: black; @margin: 10px; @padding: 20px){
    color: @color;
    margin: @margin;
    padding: @padding;
}
.class1{
    .mixin(@margin: 20px; @color: #336699);
}
.class2{
    .mixin(#336699; @padding: 40px);
}

编译为：

.class1{
    color: #336699;
    margin: 20px;
    padding: 20px;
}
.class2{
    color: #336699;
    margin: 10px;
    padding: 40px;
}

变量 @arguments

在mixin中，@arguments具有特殊的意思，当mixin被调用的时候，它包含了所有传入的参数，如果你不想单独处理参数的话，这个将会很好用。

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000){
    -webkit-box-shadow: @arguements;
       -moz-box-shadow: @arguements;
            box-shadow: @arguements;
}
.test{
    .box-shadow(2px; 5px);
}

编译为：

.test{
    -webkit-box-shadow: 2px 5px 1px #000;
       -moz-box-shadow: 2px 5px 1px #000;
            box-shadow: 2px 5px 1px #000;
}

可变参数和变量 @rest

如果你想使用数量可变的参数的mixin的时候，你可以使用"..."这个参数。在一个变量名后面使用这个参数，将会给变量分配参数。

.mixin(...){}//匹配0-N个参数
.mixin(){}//只匹配0个参数
.mixin(@a: 1){}//匹配0-1个参数
.mixin(@a: 1; ...){}//匹配0-N个参数
.mixin(@a;...){}//匹配1-N个参数

此外：

.mixin(@a; @rest...){
//@rest 代表@a参数后面的所有参数
//@arguement 代表所有参数
}

模式匹配

有时候，你可能想要通过传入的参数来改变mixin的行为。
下面先让我们从基础情况开始：

.mixin(@s; @color){ ... }
.class{
    .mixin(@switch; #888);
}

现在我们想要.mixin基于@switch的值表现的不一样，那么我们可以这样定义.mixin：

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

如果我们这个编写代码：

@switch: light;
.class{
    .mixin(@switch; #888)
}

编译为：

.class{
    color: #a2a2a2;
    display: block;
}

传入.mixin的颜色是亮色。如果@switch的值是dark,结果将会是暗色。
上面运行的过程可以这么分析：

• 第一个mixin不匹配是因为它的第一个参数值是匹配"dark"
• 第二个mixin匹配是因为它的参数匹配"light"
• 第三个mixin匹配是因为它的参数匹配任何值
  我们也可以匹配参数数量：

.mixin(@a){
    color: @a;
}
.mixin(@a; @b){
    color: fade(@a; @b);
}

现在如果我们调用.mixin并且传入一个参数，我们将会得到第一个mixin的编译结果，但是如果我们调用然后传入两个参数，我们将会得到第二个mixin的编译结果。

---

mixins的相关内容还有一点，将会放在下一篇当中，喜欢的点个喜欢或者点个赞哦！

以下为原本打算放在下一篇的内容，出于文章完整性的考虑还是放在这下面好一点。

函数化Mixins（Mixins as Function）

从mixins中返回变量或者mixin

在一个mixin中定义的变量和mixins在其使用范围内是可见并且可用的。只有一个例外，如果调用者（caller）包含了一个变量，而这个变量（可能是定义在另外的mixin的调用处）与被调用的mixin中的变量重名的话，变量不会被覆盖。在调用者（caller）本身的变量是受保护的，继承自父作用范围（caller parent）的变量是会被覆盖的。

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

编译为：
.caller{
    width: 100%;
    height: 200px;
}

然而，定义在mixin中的变量可以作为一个返回值，因此可以像使用函数那样创建mixin。

.average(@x, @y){
    @average: ((@x + @y) / 2);
}
div{
    .average(16px, 50px);
    padding: @average;
}

编译为：
div{
    padding: 33px;
}

定义在调用者（caller）自身下的变量是不能被覆盖的，因此，定义在调用者的父代（caller parent）的范围内的变量是不受保护可以被覆盖的。

.mixin(){
    @size: in-mixin;
    @defineOnlyInMixin: in-mixin;
}
.class{
    margin: @size @defineOnlyInMixin;
    .mixin();
}
@size: global-define-value;

编译为：
.class{
    margin: in-mixin in-mixin;
}

最后，定义在mixin中的mixin也可以作为返回值。

.unlock(@value){
    .dosomething(){
        declaration: @value;
    }
}
#namespace{
    .unlock(5);
    .dosomething();
}

编译为：
#namespace{
    declaration: 5;
}

Passing Rulesets to Mixins

发布于v1.7.0
ruleset可以理解成css属性，嵌套的ruleset，media声明或者存储任何东西的变量的组合。可以将一个ruleset包含进另一个ruleset或者其他的区域块，然后这个ruleset的所有属性都会被复制到此。你也可以将其当成mixin的参数，像变量一样传入。

@detached-ruleset: { background: red };
.top{
    @detached-ruleset();
}

编译为：
.top{
    background: red;
}

使用detached ruleset的时候后面一定要带上括号，如果就使用@detached-ruleset是不起作用的。
如果你想将媒体查询的代码或者浏览器不支持的类名在mixin中进行定义，这个特性会很好用。ruleset可以被传入到mixin，然后 mixin会包装传入的内容。

.desktop-and-old-ie(@rules){
    @meida screen and (min-width: 1200){ @rules(); }
    html.lt-ie9 &                      { @rules(); }
}
header{
    background-color: blue;
    .desktop-and-ie({
        background-color: red;
    })
}

编译为：
header {
    background-color: blue;
}
@media screen and (min-width: 1200) {
    header {
        background-color: red;
    }
}
html.lt-ie9 header {
    background-color: red;
}