How do I keep parentheses of SASS / SCSS mixin?

Question

I'm attempting to make a SCSS mixin for a CSS transform and I want to pass in arguments. However, when using a variable the parentheses of my position value are removed.

How it should look once compiled:

transform: translateX(-100px);

my mixin:

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

when called:

@include fadeup(X, 100px);

which sadly outputs:

transform: translateX 100px;

So the parentheses surrounding the 100px value are missing, and so it won't work.

Any ideas how I can keep the parentheses?

Answer 1

Seems to me that you could do it with a unquote to help maintain the ()... Something like this should work:

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

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

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

Compiles to:

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

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

Answer 2

Found out a way to do it. I can pass it as a single variable instead:

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

@include fadeup(Y(100px));

This will pass the Direction and the value at once in only 1 variable. It's not as readable, but it does work for passing either X or Y as the value + amount.