Thoughts on Native CSS Mixins

"Miriam Suzanne says: The CSS Working Group has agreed to move forward with CSS-native mixins. And there is a spec, but the spec only deals with @function (which does exist). Functions are a little similar but act only as a single value rather than a block of styles. The idea comes from Sass @mixin. We happen to use Sass (SCSS) at CodePen and as I write, we have 328 @mixin definitions in the codebase, so it's clearly of use."

"Things can get a little fancier in Sass, but it's all pretty straightforward: Mixins can include nesting and work in nested code. They can even slot in nested content you pass to it. Mixins can use other mixins. Mixins can have parameters (like a function) and use/calculate off those values in the output. I would assume and hope that all of this is supported in native CSS mixins."

Native CSS mixins would provide reusable blocks of CSS that can be inserted wherever needed, similar to Sass @mixin but native to CSS. Mixins would support nesting, composition, parameterization, and slotting nested content, enabling more complex style patterns. @function exists but returns a single value; mixins output entire blocks of styles. The anticipated usage syntax favors @apply over @include to avoid preprocessor conflicts. Native mixins aim to reduce the need for preprocessors, limit duplicated compiled CSS, and make shared style patterns available directly in core CSS.

Read at Frontendmasters