CODEWITHSUNDEEP
csssass
user1597713
user1597713

Reputation: 287

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?

Upvotes: 9

Views: 4542

Answers (5)

pedrorezende_
pedrorezende_

Reputation: 46

I've succeed using parentheses and single quotes:

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

Upvotes: 0

user1597713
user1597713

Reputation: 287

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.

Upvotes: 2

Cao
Cao

Reputation: 11

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!

Upvotes: 1

Pra Yogiz
Pra Yogiz

Reputation: 1

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.

Upvotes: 0

brbcoding
brbcoding

Reputation: 13586

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

Upvotes: 7

Related Questions