How do I keep parentheses of SASS / SCSS mixin?

问题

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?

回答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);
}

回答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.

回答3:

I was able to make it work using the double unquote but adding pluses before each part of the string:

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

Hope that helps!

回答4:

i have same problem, and trying with @brbcoding solution not working. if i write like this:

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

the result is :

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

Seem like unquote have problem. so i try this :

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

and that working perfectly in my case.

回答5:

I've succeed using parentheses and single quotes:

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

来源：https://stackoverflow.com/questions/23341431/how-do-i-keep-parentheses-of-sass-scss-mixin

标签

css3

Sass