Skip to content

Instantly share code, notes, and snippets.

@EmranAhmed
Last active September 23, 2024 13:47
Show Gist options
  • Save EmranAhmed/e82d5c52445b29580a53be646082221b to your computer and use it in GitHub Desktop.
Save EmranAhmed/e82d5c52445b29580a53be646082221b to your computer and use it in GitHub Desktop.
Remove the unit from any CSS value, Unitless Css Value
:root {
--val: 15rem; /* use any length unit (px, em, ex, ch, rem, ...)*/
--unitless-val: tan(atan2(var(--val), 1rem)); /** Fundamentally, tan(atan2()) is just a scalar between two dimensions. */
--val2: 34%; /* use any length unit (px, em, ex, ch, rem, ...)*/
--unitless-val2: tan(atan2(var(--val2), 1%)); /** Fundamentally, tan(atan2()) is just a scalar between two dimensions. */
--val3: 34ch; /* use any length unit (px, em, ex, ch, rem, ...)*/
--unitless-val3: tan(atan2(var(--val3), 1ch)); /** Fundamentally, tan(atan2()) is just a scalar between two dimensions. */
--val4: 12vw;
--unitless-val4: calc(tan(atan2(var(--val4), 1vw))); /* calc() wrapper required for Safari, bug:
// https://bugs.webkit.org/show_bug.cgi?id=263000
*/
}
/* show the unitless value */
body:before {
content: 'from "rem": ' counter(c) ', from "%": ' counter(d) ', from "ch": ' counter(e) ', from "vw": ' counter(f);
counter-reset: c var(--unitless-val) d var(--unitless-val2) e var(--unitless-val3) f var(--unitless-val4);
font-size: 45px;
font-weight: bold;
font-family: system-ui,sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment