SCSS + concatination fails

[wesselbaum]

My following SCSS rule

.mejs-overlay-button {
  background-image: url($icon-mediaelementjs + 'play_custom.svg');
}

results in

.mejs-overlay-button {
  background-image: url($icon-mediaelementjs ) 'play_custom.svg';;
}

which is not what it supossed to result.

Am I doing something wrong?

[ithinkandicode]

Perhaps you could use SASS's string interpolation feature? You'd wrap your variable in #{$variable}, so your code would look like this:

.mejs-overlay-button {
    background-image: url('${$icon-mediaelementjs}play_custom.svg');
}

Docs for this are here, and there's a good article here.

[wesselbaum]

Thank you for your reply. I am totaly aware that there are options to prevent this from happening. I also could put the concationation into a variable and so on. The main problem on my side is, that I work in a team of 15+ poeple and try to convince them to use csscomb but since this bug exists noone uses it, since this could happpen in the futur on places where we are not aware of.

[ithinkandicode]

That makes sense, you want to be sure that csscomb doesn't accidentally break your code!

I couldn't find the cause of this. No combination of options fixes this.

I can add some extra info though, it might help others figure this out:

• This only seems to occur with url()
• It occurs with strings or variables
• The position of the space around + (space left/right) affects the output
• If there's no space around + and the variable is used first, the issue does not occur

These break:

background: url('string'+'string'); // url('string')'string';;
background: url($var +'string');    // url($var )'string';;
background: url($var + 'string');   // url($var ) 'string';;
background: url($var+ 'string');    // url($var+ );;
background: url($var + $var);       // url($var ) $var;;
background: url('string'+$var);     // url('string')$var;;

This doesn't break:

background: url($var+'string'); // no space around + and variable must come first

As this is specific to url(), this may be an issue with the parser, gonzales-pe rather than csscomb itself.

Sorry I couldn't be more help @wesselbaum!

[jdalton]

This is fixed in the latest csscomb release :tada: