css - 如何保留 SASS/SCSS mixin 的括号？

Question

我正在尝试为 CSS 转换制作 SCSS 混合，我想传递参数。但是，当使用变量时，位置值的括号将被删除。

编译后的样子:

transform: translateX(-100px);

我的混音:

@mixin fadeup ($direction, $value) {
transform: translate#{$direction} ($value);
}

调用时:

@include fadeup(X, 100px);

遗憾的是输出:

transform: translateX 100px;

因此缺少 100px 值周围的括号，因此它不起作用。

有什么办法可以保留括号吗？

Answer 1

在我看来，您可以使用 unquote 来帮助维护 ()...这样的事情应该可行:

@mixin fadeup ($direction, $value) {
  transform: translate#{$direction}unquote("("#{$value}")");
}

.foo {
  @include fadeup(X, 100px);
}

.bar {
  @include fadeup(Y, 100px);
}

编译为:

.foo {
  transform: translateX(100px);
}

.bar {
  transform: translateY(100px);
}