Mastodawn

A week ago, we put out a poll asking how many Sass users wrote CSS custom properties that weren't also valid SassScript (https://front-end.social/@sass/115272830411739760). About a third of you said you did, but no one gave examples. We'd love to know the specific use-cases you have for custom properties that use syntax that wouldn't be valid in other CSS properties!

Sass (@[email protected])

In Sass today, CSS custom properties are parsed differently than other declarations. They don't allow normal SassScript—any variables and custom functions have to be wrapped in #{}. This is because the spec allows *anything* there, and it can be read from JS. But we're wondering: does anyone actually use this in practice? Remember that any value for any non-custom property is also valid SassScript. (Please share for broader reach!) [ ] I write CSS vars that aren't valid SassScript [ ] All my CSS vars are valid SassScript [ ] I don't use CSS vars/show results

Front-End Social

Show thread

Jens Tangermann Oct 7

@sass If i understood the original question correctly, this would be one example:

--dynamic-details_disabled: (min-width: #{$dynamic-details-breakpoint}px);

In this case passing a breakpoint to JS, so that the breakpoint is not defined in multiple places, but only in scss.