question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Math proposal: Should incompatible units output CSS clamp() without error?

See original GitHub issue

Similar to proposals for min()/max() and calc() –  clamp() needs to allow for values that would be valid CSS, but not valid Sass:

$compatible: clamp(6mm, 3in, 6cm);
$valid-css: clamp(10em, 1fr, 30%);
$also-valid: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);

(The same might be true for hypot() and atan2(), but CSS does restrict the “type” of units combined. I’m not sure if we can follow those same rules…)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
Awjincommented, Dec 3, 2019

The solution to get global min()/max() was quite complex and mostly necessitated out of backwards compatibility. I think the distinction is that, moving forward we want to avoid similarly complex implementations, and instead be more intentional about grouping functionality into modules.

0reactions
mirisuzannecommented, Dec 3, 2019

Got it - thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

When Sass and New CSS Features Collide
Shows the `Incompatible units: 'em' and 'vh'` An error when working with different types of units in the min() / max() function.
Read more >
SASS: Incompatible units: 'vw' and 'px' - Stack Overflow
The problem is if you've used SCSS for an entire project, SCSS won't compile clamp(), min() or max() due to the error above....
Read more >
CSS Values and Units Module Level 4 - W3C
Instead, the value must be clamped to the range allowed in the target context, exactly the same as math functions (see § 10.12...
Read more >
clamp() - CSS: Cascading Style Sheets - MDN Web Docs
The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound.
Read more >
sass 1.49.1 | Dart Package - Pub.dev
calc() expressions will be parsed more thoroughly, and errors will be highlighted where they ... Add support for parsing clamp() as a special...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found