时间戳

首页 > 解决方案 > 将值附加到 sass mixin 中的属性

sass - 将值附加到 sass mixin 中的属性

问题描述

我有以下 sass mixin：

@mixin absoluteCenterVertical {
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

我希望能够将额外的转换属性传递给我的 mixin，这样我就可以像使用它一样使用它

.element {
  @include absoluteCenterVertical(rotate(45deg))
}

这将编译成

.element {
  position: absolute;
  top:50%;
  transform: translateY(-50%) rotate(45deg);
}

如何做到这一点？

标签： sass

解决方案

您可以将参数与 mixins 一起使用。

@mixin absoluteCenterVertical($extraTransformVals:) {
  transform: translateY(-50%) $extraTransformVals;
}

但是，上述内容需要始终传递一个参数，@include absoluteCenterVertical(rotate(90));或者您可能传递的任何内容。如果不传递参数，sass 在编译时会报错。

如果你想有一个可选参数，这样 mixin 就可以在不传递参数的情况下工作@include absoluteCenterVertical;，你必须使用语法提供一个默认值@mixin mixinName($argName: $defaultArgValue)

这是您可以做到的一种方法：

@mixin absoluteCenterVertical($extraTransformVals: noExtraValues) {
  @if $extraTransformVals == noExtraValues {
    transform: translateY(-50%);
  } @else {
    transform: translateY(-50%) $extraTransformVals;
  }
}

推荐阅读