作为函数的mixin

作为函数的mixin

在一个 mixin 内部定义的变量或 mixin,都调用者可见,因此,它们可以作为它的返回值。如,以下Less代码:

  1. .count(@x, @y) {
  2.     @sum:(@x + @y);
  3.     @average: ((@x + @y) / 2);
  4. }

上述代码在 .count 内部定义了两个变量 @sum 和 @average,则 .count 将拥有两个返回值。调用 .count 时,就可以通过变量 @sum 和 @average 来使用返回值。如:

  1. div {
  2.     .count(10px, 30px);   // 调用
  3.     margin: @sum;         // 得到返回值 @sum,即10px + 30px
  4.     padding: @average;    // 得到返回值 @average,即(10px + 30px) / 2
  5. }

编译后的CSS代码为:

  1. div {
  2.   margin: 40px;
  3.   padding: 20px;
  4. }

除了在 mixin 内部定义的变量外,还可以在一个 mixin 中定义另一个 mixin,内部的 mixin 将成为外部 mixin 的返回值。如,以下Less代码:

  1. .outerMixin(@value) {
  2.   .nestedMixin() {
  3.     line-height: @value*2;
  4.   }
  5. }
  6. p {
  7.   .outerMixin(2em);
  8.   .nestedMixin();
  9. }

编译后的CSS代码为:

  1. p {
  2.   line-height: 4em;
  3. }
posted @ 2017-11-27 14:50  歪脖先生  阅读(344)  评论(0编辑  收藏  举报