Post

Loops and maps would be so great. Even just loops, especially now that we have things like relative colors, would make me very happy 😁

It’s funny, I never really felt the need to use maps in Sass, but now with hundreds (!) of custom properties floating around in my stylesheets, I could totally use something like that

I've used them for exactly that for projects with tons of custom properties. I divide out the properties into their own files with their own maps (e.g. _colors.scss, _spaces.scss, _z-index.scss). And then my `:root` looks a little cleaner (to me at least!)

Was a fan of the color functions. Being able to adjust lightness or saturation on a color allowed for some cool stuff. Like being able to lighten a color by 10% for a hover, or using a darker shade of a background color for a border.

Relative color syntax? developer.mozilla.org/en-US/docs/W...

I had a few fun color ones that were over engineered to hell. 1. color scales based on single color values using the named colors in CSS 2. Created a linear-gradient from a single color value 3. Created nice drop-shadows at different heights/sizes + let pass the bg color as an argument

$variable as an immutable constant would be lovely

i meant literally functions, but i totally understand the confusion AAANDD i've asked for this many many times too! through various methods like… let me: - add `const: true` inside `@property {}`? - define custom `env()` vars? - have real scoped private vars, not `--_`? i havent won yet.

we won with container queries so we can win everything

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.

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...

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.

** smiles sweetly ** sassnotsass.com 🙏🖤

oh another: loop/repeat type functions example use case would be a way to set up nth-child variations in a one-liner (ish)

Math.rand() 😇

spec has gotchu: random() random-item() nerdy.dev/css-values-5...

Very basic but helpful sometimes // Convert px to rem @function toRem($value) { $remValue: math.div($value, 16) + rem; @return $remValue; }

Being able to remove units from a variable / convert to different units would be ace.

This is actually possible using tan and atan2 😀 :root { --100vw: 100vw; --px-width: tan(atan2(var(--100vw), 1px)); } dev.to/janeori/css-...

First, I need custom media. And next, I want this thing.

yoo, checkout media query vars by @janeori.propjockey.io github.com/propjockey/c...

Some kind of incrementing function. Eg I'm the nth element. Imagining that n as a var(--n) or something like that, I could use it in a calc() function. Mainly thinking creative coding there.

There's a spec for accessing the element index, sounds like that? bsky.app/profile/nerd...

Still ARE. Generating polygon points for a clip-path. Regular, equilateral (not necessarily regular), quasi-regular, random. Generating gradient lists. Generally, pretty much everything that involves looping, which was THE reason why I started using Sass to begin with.

Maybe off-topic but looking at nerdy.dev/hover-not-ho..., it would be nice to be able to assign ‘n’ to a custom prop when doing ‘:nth-child(n)’. Would somewhat mitigate the need for looping.

i believe what you're describing is sibling-index(), a function specced to return each elements individual index. this would remove the inline custom properties and become more dynamic, moving it towards your suggestion here yeah? github.com/w3c/csswg-dr...

🤩