Question

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

编译后的外观如何：

transform: translateX(-100px);

我的mixin：

@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);
}

Answer 2

找到了一种方法。我可以将其作为单个变量传递：

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

@include fadeup(Y(100px));

这将仅在1个变量中立即传递Direction和值。它不具有可读性，但它可以将X或Y作为值+金额传递。

Answer 3

我能够使用double unquote使其工作，但在字符串的每个部分之前添加了加号：

transform:$args+unquote('(') + $value + unquote(')');

希望有所帮助！

Answer 4

我遇到同样的问题，尝试使用@brbcoding解决方案无效。如果我这样写：

transform: translate#{$direction}unquote("("#{$value}")");

结果是：

transform: translateX"("100px")";

似乎unquote有问题。所以我试试这个：

transform: translate#{$direction}unquote("(")#{$value}unquote(")");

在我的案例中完美运作。

Answer 5

我成功使用括号和单引号：

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

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

5 个答案: