user1597713 user1597713 - 20 days ago 9
Sass (Sass) Question

SASS/SCSS Parentheses within mixin

I'm attempting to make a SCSS mixin for a css transform and I want to pass in arguments. It's working fine, only that for the position value must be in brackets, yet when I use a variable it removes them....

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

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