Sass compatibility: Handling of slashes in CSS values

[ghen-arvesu]

Hi @eliot-akira , looks like the new code editor cannot handle the CSS value below,it possible that it’s a problem with the slashes

grid-area: 1 / 1 / 2 / 2;

Work around:

 grid-row-start: 1;
 grid-column-start: 1;
 grid-row-end: 2;
 grid-column-end: 2;

Bug Source:
https://discourse.tangible.one/t/code-editor-handling-of-slashes-in-css-values/1201

[ghen-arvesu]

Hi @eliot-akira

The customer noticed that the issue could be related to restricting maths inside of the calc property for CCS as it looks like its automatically doing calculations. Hope this help. thank you

[eliot-akira]

Thanks @ghen-arvesu. I've upgraded the Sass compiler (the PHP port we're using), but it turns out this is a known issue that's not solved yet.

• The handling of / is not spec compliant scssphp/scssphp#146

For CSS properties that use a slash for any purpose other than division, the compiler doesn't yet support the syntax - and replaces it with the calculated value. The issue has been unsolved for a while, so I'm guessing it's not easy to fix.

As a workaround, the value can be wrapped with unquote('..'). For example:

grid-area: unquote('1 / 1 / 2 / 2');

---

I'll leave this issue open until it's solved "upstream" in the SCSS-PHP library.

We might move away from Sass in the future, since it's a bit of burden for maintenance - but some of its features are useful and still not possible with regular CSS.

An idea I'm considering is to use the official Sass compiler (written in Dart and server-side only) compiled to WebAssembly to run in the browser. That would ensure compatibility with the newest Sass/CSS specifications. But there will be questions to solve, like how to replace our current use of local Sass variables with CSS variables. I've opened a new issue #88 to keep track of the idea.