How to save SASS / SCSS mixin parentheses?

Question

I am trying to make a SCSS combination to convert CSS, and I want to pass arguments. However, when using a variable, the brackets are removed from my value.

How it should look after compilation:

transform: translateX(-100px); 

my mixin:

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

when calling:

 @include fadeup(X, 100px); 

which sadly outputs:

 transform: translateX 100px; 

So, the brackets surrounding the 100px value are missing, and therefore it will not work.

Any ideas how I can store parentheses?

Answer 1

It seems to me that you can do this with unquote to help maintain () ... 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:

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

Answer 2

Found a way to do it. I can pass it as one variable:

 @mixin fadeup ($direction) { transform: translate#{$direction}; } @include fadeup(Y(100px)); 

This will convey the direction and value in just one variable at once. This is not readable, but it works to pass X or Y as a value + sum.

Answer 3

I managed to get it to work using double unquote, but adding pluses in front of each part of the line:

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

Hope this helps!

Answer 4

I have the same problem and trying with @brbcoding solution does not work. if I write like this:

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

result:

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

It seems that unquote has a problem. so i try this:

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

and it works fine in my case.

Answer 5

I managed to use parentheses and single quotes:

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