属性值的 SASS 函数/mixins

Question

这是一个混合的示例：

=border($alpha: 0.2)
    1px solid hsla(0, 0, 0, $alpha)

我想使用函数/mixins 来实现这样的目标：

border-right: +border(0.2)

这将编译成：

border-right: 1px solid hsla(0, 0, 0, 0.2)

我还没有看到任何关于如何使用函数/mixin 来动态计算属性值的文档。我只看到它们也包含该属性时使用。这是如何实现的？

Answer 1

你可以这样写函数：

@function border($alpha: 0.2)
  $border: 1px solid hsla(0, 0, 0, $alpha)
  @return $border

并像任何其他 sass/compass 函数一样应用它们：

border-right: border(0.2)