美文网首页
Less 06 方法混入 (Mixins as Function

Less 06 方法混入 (Mixins as Function

作者: Sommouns | 来源:发表于2019-10-04 12:37 被阅读0次

目录:

Less 01 准备工作
Less 02 变量(Variable)
Less 03 扩展(Extend)
Less 04 混入(Mixins)
Less 05 参数混入(Parametric Mixins)
Less 06 方法混入 (Mixins as Functions)
Less 07 CssRules 直接混入(Passing Rulesets to Mixins)
Less 08 导入(Import)
Less 09 守卫(Guards)
Less 10 其他操作(完结)

Mixins as Functions

在mixin中定义的变量是可以被调用者使用的。这就像函数一样,会return一些值出去。当然又一个例外,如果调用者本身就有一个同名的变量,就不会再去copy了。

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

.caller {
  .mixin();
  width:  @width;
  height: @height;
}

输出

.caller {
  width:  100%;
  height: 200px;
}

我们通过这一点,就可以去写一些我们的函数

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

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

更加复杂一些的例子

.unlock(@value) { // outer mixin
  .doSomething() { // nested mixin
    declaration: @value;
  }
}

#namespace {
  .unlock(5); // unlock doSomething mixin
  .doSomething(); //nested mixin was copied here and is usable
}

相关文章

  • Less 06 方法混入 (Mixins as Function

    目录: Less 01 准备工作Less 02 变量(Variable)Less 03 扩展(Extend)Les...

  • LESS - Mixins(混入)

    混入 Mixins 混入是指把已存在的样式混入到别的样式中。 你可以把 class 选择器 和 id 选择器混入到...

  • Less 04 混入(Mixins)

    目录: Less 01 准备工作Less 02 变量(Variable)Less 03 扩展(Extend)Les...

  • vue自定义选项合并策略

    Vue的mixins,混入的data、props、methods里面的方法与组件的方法同名时,混入的方法会被组件的...

  • Less 05 参数混入(Parametric Mixins)

    目录: Less 01 准备工作Less 02 变量(Variable)Less 03 扩展(Extend)Les...

  • vue-api-组合

    extends 扩展 mixins 混入

  • Dart中的新特性(Mixins)

    什么是Mixins?Mixins的中文意思是混入,即在一个类中混入其他类。首先我们需要知道,Mixins不是接口,...

  • TypeScript19(Mixins混入)

    TypeScript 混入 Mixins 其实vue也有mixins这个东西 你可以把他看作为合并 1.对象混入 ...

  • mixins混入

    因为在项目中 mixins(混合)特性使用频率是很高的 有必要熟练掌握 官方文档: mixins 混入 (mix...

  • mixins

    vue混入(mixins) 简介 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混...

网友评论

      本文标题:Less 06 方法混入 (Mixins as Function

      本文链接:https://www.haomeiwen.com/subject/uytspctx.html