css - 将 "empty"参数传递给 SASS mixin，以便使用默认参数

Question

考虑以下两个混入:

@mixin padding($v: 8px)
  padding: $v - 3 $v $v - 3 $v

@mixin button($padding: "")
  @include padding($padding)
  @include border-radius
  border: 1px solid black

我可以不带参数地调用@include padding，并且使用默认的8px，没问题。但是我怎样才能调用 button mixin 并且仍然在 padding mixin 中使用默认值？如果我简单地调用 @include button 而不带参数，button mixin 似乎仍然将某种参数传递给 padding( padding 不可避免地解释为 0，因此不添加任何填充)。基于Making a Sass mixin with optional arguments ，我尝试修改 button 混入

@include padding(unquote($padding))

但这没有效果——padding 似乎仍然将参数解释为 0，而不是没有参数并因此使用其默认值。

Answer 1

这个问题通常通过将两个 mixin 的默认参数设置为相同的值来解决。您可能希望为此目的使用全局变量:

$default-padding: 8px

@mixin padding($v: $default-padding)
  padding: $v - 3 $v $v - 3 $v

@mixin button($padding: $default-padding)
  @include padding($padding)
  @include border-radius
  border: 1px solid black