0

How do I stop Sass from performing a calculation on the following background-position declaration?

background: #000 url('/foo.png') no-repeat fixed center 110%/115%

Bug found. It has to do with SquareSpace servers and their compiling of pre-compiled CSS. The issue will have to be resolved on their end.

Ryan Prentiss
  • 1,492
  • 2
  • 25
  • 46

1 Answers1

2

Use string literals/interpolation, #{"<string>"}:

background: #000 url('/foo.png') no-repeat fixed center 110%#{"/"}115%

As you've mentioned you might be passing the file through a LESS compiler, then you need to escape the offending string using ~"<string>":

background: #000 url('/foo.png') no-repeat fixed center ~"110%/115%"
Terry
  • 63,248
  • 15
  • 96
  • 118
  • 1
    on Sassmeister I can't see any problem with the OP code: https://www.sassmeister.com/gist/958d4a9a1fc591f0ca8326c40f46e368 – Fabrizio Calderan May 03 '18 at 14:54
  • @fcalderan It is possible that OP is using an older version of SASS – Terry May 03 '18 at 14:55
  • I've found the issue. I'm custom designing a SquareSpace page and they're recompiling all pre-compiled CSS as if it were LESS. Thank you for the help. – Ryan Prentiss May 03 '18 at 15:37
  • @RyanPrentiss Ah, if that's the case, you will need to use LESS way of escaping strings, i.e. `~""` – Terry May 03 '18 at 15:40
  • I compiled the CSS locally before uploading and the markup is fine. It's the actual compiled CSS SquareSpace is ruining by dividing the percentages. – Ryan Prentiss May 03 '18 at 15:45