less新手入门（二） Mixin 混合、带参数的Mixin

三、mixin 混合

“mixin”属性只能基于现在已有的样式规则！你可以在mixin中使用类选择器和id选择器：

.a,#b{

    color: rebeccapurple;

}

.mixin-class{

    .a();

}

.mixin-id{

    #b();

}

输出：

.a,

#b {

  color: rebeccapurple;

}

.mixin-class {

  color: rebeccapurple;

}

.mixin-id {

  color: rebeccapurple;

}

注意，当调用mixin时，括号是可选的

.a()  //此种写法和下面写法无区别

.a;

3.1 不输出的 mixin

如果你想创建一个mixin，但你不想让mixin在生成css中输出，你可以在它后面加上括号 () 。

.my-mixin{

    color: black;

}

.my-other-mixin(){

    background: wheat;

}

.class{

    .my-mixin;

    .my-other-mixin;

}

输出：

.my-mixin {

  color: black;

}

//此处并没有输出 .my-other-mixin

.class {

  color: black;

  background: wheat;

}

3.2 选择器在mixin的用法

mixin不仅可以包含属性，还可以包含选择器

.my-hover-mixin(){

    &:hover{

        border: 1px solid red;

    }

}

button{

    .my-hover-mixin();

}

输出：

button:hover {

  border: 1px solid red;

}

3.3 命令空间 Namespaces

如果想要在一个更复杂的选择器中混合属性，可以堆叠多个id或类

#outer{

    .inner{

        color: red;

    }

}

.c{

    #outer>.inner;

}

同样，上面的 > 符号是可选的，

// 下面写法都一样

#outer > .inner;

#outer > .inner();

#outer.inner;

#outer.inner();

这种使用方法被称为命名空间。您可以将mixin置于id选择器之下，这样可以确保它不会和另一个库冲突。

#my-library {

  .my-mixin() {

    color: black;

  }

}

// which can be used like this

.class {

  #my-library > .my-mixin();

}

3.4 !important 关键字

在mixin后使用 !important 关键字，将会标记调用所有继承的属性为!important

.foo (@bg: #f5f5f5, @color: #900) {

  background: @bg;

  color: @color;

}

.unimportant {

  .foo(1);

}

.important {

  .foo(2) !important;

}

输出：

.unimportant {

  background: #f5f5f5;

  color: #900;

}

.important {

  background: #f5f5f5 !important;

  color: #900 !important;

}

四、带参数的Mixin

如何将参数传递给mixin？

mixin还可以接受参数，这些参数在混合时传递给选择器块。举例：

.border-radius(@radius) {

  -webkit-border-radius: @radius;

     -moz-border-radius: @radius;

          border-radius: @radius;

}

下面是我们如何将其混合到各种规则中:

#header {

  .border-radius(4px);

}

.button {

  .border-radius(6px);

}

参数mixin还可以为其参数设置默认值

.border-radius(@radius: 5px) {

  -webkit-border-radius: @radius;

     -moz-border-radius: @radius;

          border-radius: @radius;

}

我们现在可以这样来调用:

#header {

  .border-radius;

}

你也可以使用不带参数的参数混合。如果您希望从CSS输出中隐藏规则集，但希望将其属性包含在其他规则集中，则这非常有用：

.wrap() {

  text-wrap: wrap;

  white-space: -moz-pre-wrap;

  white-space: pre-wrap;

  word-wrap: break-word;

}

pre { .wrap }

输出如下：此案例同上方 3.1

pre {

  text-wrap: wrap;

  white-space: -moz-pre-wrap;

  white-space: pre-wrap;

  word-wrap: break-word;

}

4.1 mixin中包含多个参数 - Mixins With Multiple Parameters

参数是分号或逗号分割的。

建议使用分号。因为逗号有双重含义：它既可以被解释为mixin参数的分隔符，也可以作为css列表分隔符，容易混淆。

如果使用逗号作为mixin分隔符，那么就不可能创建使用逗号分隔的列表作为参数。另一方面，如果编译器在mixin调用或声明中看到至少一个分号，那么它假设参数由分号分隔，所有逗号都属于css列表：

两个参数和每个包含逗号分隔的列表: .name(1, 2, 3; something, else)
三个参数，每个参数包含一个数字：.name(1, 2, 3)
使用假分号来创建一个包含逗号分隔的css列表的mixin调用：.name(1, 2, 3;)
逗号分隔的默认值：.name(@param1: red, blue;)

定义多个具有相同名称和参数的mixin是合法的。Less将使用所有可以应用的属性。如果你用mixin与一个参数，例如，. mixin(green)，那么就会使用所有具有一个强制参数的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;

}

.some .selector div{

    .mixin(#008000);

}

输出：

.some .selector div {

  color-1: #008000;

  color-2: #008000;

  padding-2:;

}

4.2 命令参数

mixin引用的时候仅使用参数名称引用即可，不需要有任何特殊的顺序

.class1(@color:black;@margin:10px;@padding:20px){

    color: @color;

    margin: @margin;

    padding: @padding;

}

.demo1{

    .class1(@margin:20px; @color:#33acfe);

}

.demo2{

    .class1(#efca33; @padding:40px;)

}

输出：

.demo1 {

  color: #33acfe;

  margin: 20px;

  padding: 20px;

}

.demo2 {

  color: #efca33;

  margin: 10px;

  padding: 40px;

}

4.3 @arguments变量

@arguments在mixin中有一个特殊的含义，它包含所有传入的参数，当mixin被调用时。如果你不想处理个别参数，这很有用:

.box-shadow(@x:0; @y:0; @blur:1px; @color:#000){

    -webkit-box-shadow:@arguments;

       -moz-box-shadow:@arguments;

           -box-shadow:@arguments;

}

.big-block{

    .box-shadow(2px; 5px;)

}

输出：

.big-block {

  -webkit-box-shadow: 2px 5px 1px #000;

  -moz-box-shadow: 2px 5px 1px #000;

  -box-shadow: 2px 5px 1px #000;

}

4.4 高级参数和@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 之后的参数

   // @arguments 绑定到所有参数

}

4.5 模式匹配

有时，您可能希望根据你传递给它的参数来更改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定义不匹配，因为它设置第一个参数是 dark 。
第二个mixin定义匹配，因为它设置的参数是 light。
第三个mixin定义匹配，因为它设置的参数为任何值。

只有匹配到的 mixin 定义才会被使用，变量可以匹配并绑定到任何值。除了变量之外的，其他任何东西都只匹配一个与自身相等的值。

这里我们也可以对颜色的浓度进行匹配，例如:

.mixin(@a) {

  color: @a;

}

.mixin(@a; @b) {

  color: fade(@a; @b);

}

现在如果我们使用 .mixin只定义一个参数，我们将得到第一个定义的输出，但是如果我们用两个参数调用它，我们将得到第二个定义，即颜色值为 @ a淡入到 @ b。

巴特西