Intent to Prototype: CSS mixins

67 views
Skip to first unread message

Stephanie Zhang

unread,
12:29 PM (6 hours ago) 12:29 PM
to blink-dev, John Jansen, Kevin Babbitt, Leo Lee, Brandon Walderman
Note: this feature is not being prototyped from scratch. Chromium developers had already started an initial implementation of @mixin behind a flag (CSSMixins), but no I2P or dev trial announcement was ever sent to blink-dev. We are picking it up from there, having gained clarity on some open spec issues and are adjusting the implementation to match CSSWG resolutions. This Intent to Prototype formalizes and continues that work.
 
Contact emails
 
Explainer
 
Specification
 
Summary
Defines a reusable, parameterized block of style declarations and nested style rules with the @mixin rule, then expands them in place within a style rule via @apply as if the mixin's contents had been written there directly. The mixin body puts the declarations and rules to emit inside an @result block, while any local custom properties used to compute them stay private and never reach the element; parameters can be typed and given defaults, and @result can contain conditional rules such as @supports and @media. This lets authors package consistent patterns – component styles, effects like gradient text, responsive shorthands – once and reuse them across a stylesheet without a CSS pre-processor.
 
Blink component
 
Web Feature ID
 
Motivation
To reuse a consistent pattern across a stylesheet, whether component styles, effects like gradient text, or responsive shorthands, authors currently must either duplicate the same declarations and nested rules in every style rule that needs them, which drifts out of sync and is error prone, or reach for a CSS pre-processor such as Sass, which introduces a separate language and build step and cannot respond to the cascade at runtime. Custom properties share individual values but not whole blocks of declarations and rules and offer no way to parameterize a pattern or keep the local custom properties used to compute it private. The @mixin rule fills this gap natively, letting authors package such patterns once and expand them in place as if the contents had been written there directly.
 
Initial public proposal
 
Goals for experimentation
None
 
Requires code in //chrome?
False
 
Tracking bug
 
Estimated milestones
No milestones specified
 
Link to entry on the Chrome Platform Status
 
This intent message was generated by Chrome Platform Status.
 
 
Reply all
Reply to author
Forward
0 new messages