Question

在lesscss中我可以编写这样的mixins，这样调用.myMixin(@a)一个参数就会使用第一个mixin，而用两个参数.myMixin(@a, @b)调用它会使用mixin的第二个版本。

.myMixin(@paramOne) {
  // do something with the single-parameter version of mixin
}

.myMixin(@paramOne, @paramTwo) {
  // do something with the two-parameter version of mixin
}

我怎样才能在sass中做同样的事情？或者在sass世界中有更好的方法来实现这一目标吗？

Answer 1

您可以将第二个参数设置为false作为默认值，并在mixin中执行@if语句。

@mixin myMixin( $param1, $param2:false ){
    @if $param2 == false{
        // Do something
    }
    @else{
        // Do something with both parameters
    }
}

编辑：这是我将px单元转换为em单元的自定义函数。您可以将列表或单个值作为参数传递。您还可以设置基准和线高。也许你可以在这个功能中找到一些技巧。

您可以像这样使用它：emify(10px 16px, 16px)。

这将输出：0.625em 1em

/**
*
* Emify
*    Transform px unit into em
* defaults:
*    base: 16
* usage:
*    emify(unit)
*    emify(unit, base)
*    emify(unit, line-height, base)
* examples:
*    emify(16px) = 1em
*    emify(16px, 10px) = 1.600em
*    emify(16px, 10px, 10px) = 1.600em / 1em
*
**/    
@function emify( $target, $lineheight: null, $base: null ) {

    @if $base == null and $lineheight == null { $base: 16 }
    @if $base == null and $lineheight != null { $base: $lineheight }

    [...]

}

如何使用可变参数定义Sass mixins

1 个答案: