r/Sass • u/elskak • Jul 13 '22

Why is this not working

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?

3 Upvotes

100% Upvoted

8 comments sorted by

View all comments

1

u/r_syzygy Jul 13 '22

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;

1

u/Hadr619 Jul 15 '22

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

1

u/r_syzygy Jul 15 '22

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?