作为函数的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. }

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。