Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

First-class calc and unary operator #1887

Closed
flachware opened this issue Feb 15, 2023 · 4 comments · Fixed by #1888
Closed

First-class calc and unary operator #1887

flachware opened this issue Feb 15, 2023 · 4 comments · Fixed by #1888
Assignees
Labels
bug cosmetic Doesn't affects CSS semantics

Comments

@flachware
Copy link

Hi, as slash as division is deprecated by now, I’d like to follow the first-class calc() recommendation:

Recommendation: math.div(-$var, 2) or calc(-$var / 2)
$var: 16px;

div {
  margin: calc(-$var / 2);
}
Error: Expected digit.
  ╷
9 │   margin: calc(-$var / 2);
  │                 ^
  ╵

The negation produces an error though – is this expected?
I’m using sass 1.58.1.

@nex3
Copy link
Contributor

nex3 commented Feb 15, 2023

This is an interesting issue. Our recommendation generation logic currently assumes that any SassScript expression is drop-in compatible in a calc() context, but our calc() grammar doesn't currently allow unary minus. This is inconsistent with SassScript, but consistent with plain-CSS calc(), which doesn't support unary minus anywhere (except in numeric and infinity literals, where it's considered part of the literal and not the operation). Talking to @tabatkins, it sounds like this is intentional—it would be syntactically painful to support it for variables or other function calls, since -var(--foo) just parses as a function named -var, so it's forbidden even in syntactically-safe places (like -(1 + 2)) for consistency.

I think we should probably lean towards consistency with plain CSS here, given that we already restrict the use of other SassScript arithmetic features in calc(). That does mean we should change the recommendation here to suggest calc(-1 * $var / 2).

@flachware
Copy link
Author

Thanks for clarifying. May I ask which other arithmetic features are restricted in calc()?

@nex3
Copy link
Contributor

nex3 commented Feb 16, 2023

Sass's calculation support covers all the standard calculation features defined in Values and Units 3, as well as the ability to use Sass variables and Sass functions. The only expression-level syntax it doesn't include (that would be meaningful in a calculation context) is unary operations and the % operator.

@flachware
Copy link
Author

All clear, thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug cosmetic Doesn't affects CSS semantics
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants