Less简明教程
2.2.3 作为函数的mixin
阅读(

Less 基础

Less 特性

变量

Mixin

带参数的mixin

什么是Mixin

作为函数的mixin

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

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

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

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

编译后的CSS代码为:

div {
  margin: 40px;
  padding: 20px;
}

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

.outerMixin(@value) {
  .nestedMixin() {
    line-height: @value*2;
  }
}
p {
  .outerMixin(2em);
  .nestedMixin();
}

编译后的CSS代码为:

p {
  line-height: 4em;
}

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验