Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to insert a variable into text in mixin #2460

Closed
ghost opened this issue Jan 26, 2018 · 1 comment
Closed

How to insert a variable into text in mixin #2460

ghost opened this issue Jan 26, 2018 · 1 comment

Comments

@ghost
Copy link

ghost commented Jan 26, 2018

Here is my code

@mixin box-shadow($y, $x, $blur, $stretch, $color)
{
	box-shadow: $y $x $blur $stretch $color;
	-webkit-box-shadow: $y $x $blur $stretch $color;
	-moz-box-shadow: $y+px $x $blur $stretch $color;
	filter: progid:DXImageTransform.Microsoft.dropshadow(offX=$x, offY=$y, color=$color);
}
p {
@include box-shadow(10, 10, 10, 0, #fff);
}

Why is the result obtained here by the result?

  webkit-box-shadow: 10 10 10 0 #fff;
  -moz-box-shadow: 10px 10 10 0 #fff;
  filter: progid:DXImageTransform.Microsoft.dropshadow(offX=$x, offY=$y, color=$color);

I need to get this result:

  webkit-box-shadow: 10 10 10 0 #fff;
  -moz-box-shadow: 10px 10 10 0 #fff;
  filter: progid:DXImageTransform.Microsoft.dropshadow(offX=10, offY=10, color=$color);
@nex3
Copy link
Contributor

nex3 commented Jan 26, 2018

You need to use interpolation to include variables in Microsoft filter syntax: progid:DXImageTransform.Microsoft.dropshadow(offX=#{$x}, offY=#{$y}, color=#{$color});. This is because it's not standard CSS syntax, so Sass treats it as a special kind of string since it can't parse it normally.

@nex3 nex3 closed this as completed Jan 26, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
1 participant