/ interpreted as division instead of separator

[chriseppstein]

Title: bare / should not be interpreted as division with bare literals

Originally filed:
sass/sass#2118

For more info see:
sass/sass#667 (comment)

input.scss

.foo {
  background: url('background.png') -10px -10px/110% no-repeat
}

[libsass 3.5.5] [1]

// error
{
  "formatted": "Error: -0.09091px/% isn't a valid CSS value.\n        on line 2 of foo.scss\n>>   background: url('background.png') -10px -10px/110% no-repeat\n   ------------------------------------------^\n",
  "message": "-0.09091px/% isn't a valid CSS value.",
  "column": 43,
  "line": 2,
  "file": "/Users/ceppstei/Projects/broccoli-multi-filter/foo.scss",
  "status": 1
}

ruby sass 3.4.22

.foo {
  background: url("background.png") -10px -10px/110% no-repeat; }

version info:

$ node-sass --version
node-sass       3.8.0   (Wrapper)       [JavaScript]
libsass         3.3.6   (Sass Compiler) [C/C++]

Spec added sass/sass-spec#909

[gakimball]

The compiler seems to only try division if one or both of the operands is negative.

This will compile as-is:

.selector {
  background: #fff url('') 100px 20px / 100%;
}

This will produce an error:

.selector {
  background: #fff url('') 100px -20px / 100%;
}

For anyone who needs a temporary workaround, you can interpolate the negative value to bypass the error.

.selector {
  background: #fff url('') 100px #{-20px} / 100%;
}