Post

what were your favorite SASS functions (not mixins)? or just other CSS functions you'd expect to be possible by a vanilla CSS function?

TwistedAndy

@toniievych.bsky.social

7 Jan 2025

The most useful one is rgba(). Unfortunately, it's not possible to pass a HEX color as a property to rgba() in plain CSS. As for SASS, I do not support their approach with breaking compatibility with the previous versions. That's not acceptable.

Adam Argyle

@nerdy.dev

you've seen the relative color syntax CSS feature? you can pass a hex and get back rgb channels (and alpha) background: rgb(from #abc r g b / 50%); developer.chrome.com/blog/css-rel...

developer.chrome.comCSS relative color syntax | Blog | Chrome for DevelopersCreate new colors based on another color's channels and values.

7/1/25, 6:06 pm1 repost3 likes

TwistedAndy

@toniievych.bsky.social

7 Jan 2025

Thank you for the suggestion! It's not perfect, but looks nice. My biggest concern at this point is mostly the browser support, especially on iOS (caniuse.com/css-relative...). Are there any workarounds for old devices? I assume, that they will simply ignore that values.

caniuse.comCSS Relative color syntax | Can I use... Support tables for HTML5, CSS3, etc

Adam Argyle

@nerdy.dev

7 Jan 2025

solutions for older browsers is to do it in SASS instead of the browser indeed, they'll simply ignore what they don't understand

TwistedAndy

@toniievych.bsky.social

7 Jan 2025

Thank you! By the way, are there any updates regarding using CSS properties in @media queries? Or to create some named queries like --media-desktop: (min-width: 1024px) and then use it like @media (--media-desktop)? I was trying to replace SASS with that a while ago.

Adam Argyle

@nerdy.dev

7 Jan 2025

i dont think we'll see custom properties in media queries, but we may see env() variables in there more likely that @custom-media will get picked up (spec drafts.csswg.org/mediaqueries...). open props has a bunch in a file, waiting to remove the postcss plugin open-props.style#media-queries

open-props.styleOpen Props: sub-atomic stylesOpen source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.