36 * 2.083333333333% = 74.%, wrong calculation and compilation

[ibrahimBeladi]

We use a a 48-col grid, and we built it using sass, and we have this rule

.f-grow-36 {
  flex: 0 0 36 * 2.083333333333% !important;
  max-width: 36 * 2.083333333333% !important;
}

It is compiled to css as

.f-grow-36 {
  flex: 0 0 74.% !important;
  max-width: 74.% !important;
}

Mathematically, 36 * 2.083333333333 is 75 not 74
Syntactically, 74.% is not a valid property value in css, it should be either 74% or 74.0%

Using sass@1.62.1 (on a nuxt project)

Side notes:

• Adding an additional 3 from the number it works (36 * 2.0833333333333% => 75%)
  • Adding further more digits does not seems to change anything
• Removing a single 3 digit solves the issue for 36, but breaks col-12 (12 * 2.08333333333% => 24.%)
• Removing 2+ 3 digits makes the compiled css valid, but does not provide the accurate numbers for my use case

[nex3]

I can't reproduce this:

$ node --version
v19.7.0
$ npx sass --version
1.63.2 compiled with dart2js 3.0.3
$ cat test.scss
.f-grow-36 {
  flex: 0 0 36 * 2.083333333333% !important;
  max-width: 36 * 2.083333333333% !important;
}
$ npx sass test.scss
.f-grow-36 {
  flex: 0 0 75% !important;
  max-width: 75% !important;
}

Can you provide a standalone repository that only depends on Sass, and consistently reproduces this?

[ibrahimBeladi]

Sure, I will try to reproduce it.

[ibrahimBeladi]

Sorry for the long delay, I was on a vacation

I will close this as it seems an issue with @nuxtjs/vuetify package as they are using "sass": "1.32.13".
Overriding the sass package to 1.33.0 or higher version fixes this issue. Possibly due to #1312

---

Here's the hacky fix for those using @nuxtjs/vuetify module, include this in package.json:

"overrides": {
    "@nuxtjs/vuetify": {
      "sass": "1.33" 
    }
  }

Notice: 1.33 or any more recent version is also viable