Question

I have the Sass plugin added for my Visual Studio (web workbench). It’s nice because once I save the .scss file the css file is generated right away. Anyway, I have an IE ‘filter:’ set up and the Sass compiler is adding extra space.

My variables:

$blueColor: 5993D3; 
$lightColor: FFFFFF;

My mixin:
(the light color is white and would be identical on all the calls that is why it’s not being passed as a variable)

@mixin filterIE($startColor) {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#FF#{$startColor}', EndColorStr='#00#{$lightColor}');
}

My include:

@include filterIE($blueColor);

The problem is output. It puts an extra space in it (notice the 3 in the StartColorStr. No matter what I try it adds a space. I have a few other of these on the page and they work fine.

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF5993D 3', EndColorStr='#00FFFFFF');

You can see the lightColor works fine. No spaces. Any thoughts?

Answer 1

I think the problem is that SASS doesn’t understand correctly the data type of the $blueColor variable (it’s not a hex color as it doesn’t start with #, and if you change the first character with a letter the space doesn’t appear).

Fix it by adding quotes to the variable

$blueColor: "5993D3";

which will not anyway appear in the output as you are already using interpolation #{} in the mixin.