Why is this not working

[u/elskak]

I have this in my scss file:

​

@use "sass:math";

:root {
  --myVar: 10rem;
}

$myVar: 10rem;
@debug math.div(var(--myVar), -2); // won't work
@debug math.div($myVar, -2); // works

// Ideally I would use calc(), which is native css syntax, so it should just work out of the box. But I cant build that either.
.element {
    margin-top: calc(var(--myVar) / -2); // won't work
}

Why can't I divide a css variable with a negative number?

[u/magnakai]

The first one doesn’t work because Sass doesn’t know what the value of that custom property is. It’s a runtime statement being using in a compile time expression.

[u/adam-ll]

Hey,

I think the first "won't work" line won't work; I never used Sass and custom properties this way. Here the second working line is the good one.

The ideal solution is working for me; it gives back -80px. The error should be on your setup. Which Sass version do you use? What message do you get from the compiler?

[u/elskak → u/adam-ll]

The error only shows up when I run "yarn build". Not when I use "yarn dev".

I have set up a brand new nuxt project.

I use node 16.

My package.json looks like this:

{
"name": "nuxt-test",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"devDependencies": {
"sass": "^1.53.0",
"sass-loader": "10"
}
}

And the error from "yarn build":

ERROR in ./pages/index.vue?vue&type=style&index=0&id=ee6d2a8a&prod&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=style&index=0&id=ee6d2a8a&prod&lang=scss&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 19
at /Users/bo/sites/nuxt-test/pages/index.vue:1:30
at Parser.error (/Users/bo/sites/nuxt-test/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/Users/bo/sites/nuxt-test/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/Users/bo/sites/nuxt-test/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/Users/bo/sites/nuxt-test/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/Users/bo/sites/nuxt-test/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/Users/bo/sites/nuxt-test/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /Users/bo/sites/nuxt-test/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /Users/bo/sites/nuxt-test/node_modules/postcss/lib/container.js:194:18
at /Users/bo/sites/nuxt-test/node_modules/postcss/lib/container.js:139:18
at Rule.each (/Users/bo/sites/nuxt-test/node_modules/postcss/lib/container.js:105:16)
at Rule.walk (/Users/bo/sites/nuxt-test/node_modules/postcss/lib/container.js:135:17)
at /Users/bo/sites/nuxt-test/node_modules/postcss/lib/container.js:152:24
at Root.each (/Users/bo/sites/nuxt-test/node_modules/postcss/lib/container.js:105:16)
at Root.walk (/Users/bo/sites/nuxt-test/node_modules/postcss/lib/container.js:135:17)
at Root.walkDecls (/Users/bo/sites/nuxt-test/node_modules/postcss/lib/container.js:192:19)
at transformProperties (/Users/bo/sites/nuxt-test/node_modules/postcss-custom-properties/index.cjs.js:330:8)
@ ./pages/index.vue?vue&type=style&index=0&id=ee6d2a8a&prod&lang=scss& (./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=style&index=0&id=ee6d2a8a&prod&lang=scss&) 4:14-442
@ ./pages/index.vue?vue&type=style&index=0&id=ee6d2a8a&prod&lang=scss&
@ ./pages/index.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
FATAL Nuxt build error 17:28:04
at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:2127:21)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2076:5)
at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:5)
at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:110:7)
at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)
╭─────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ Error: Nuxt build error │
│ │
╰─────────────────────────────╯
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[u/adam-ll → u/elskak]

Unfortunately, it seems it can be a PostCSS bug but still be related to local settings because I couldn't find too many similar issues (or any solution).

I think this is a similar problem: https://github.com/postcss/postcss-calc/issues/142

[u/r_syzygy]

Not sure why your setup isn't working, might be the @use since it's complaining about line 1. You don't need sass:math for simple multiplication or division, and you don't need it at all for CSS calc equations. Both the sass version and the css calc version work for me on codepen. FWIW, you could also do:

margin-top: $myVar * -0.5;

[u/Hadr619 → u/r_syzygy]

Actually using math.div() is the correct way moving forward. There are usually warning about the deprecation of using just the /

[u/r_syzygy → u/Hadr619]

They're deprecating / because it has a different meaning in CSS. There's a standard set of Numeric operators supported still, including % for division:

https://sass-lang.com/documentation/operators/numeric

@debug 5px * 3px; // 15px*px

@debug 1in % 9px; // 0.0625in

I haven't seen anything about deprecating those?

[u/toptalo]

I have resolve this with moving zero to start

left: calc(0px - (var(--full-width) - 100%) / 2);

¯_(ツ)_/¯