Functions
are both ready for you to hack on 🤯. I think of functions as returning a value
and mixins as a way to apply a chunk of styles.
Bramus has a great intro on
@function,
don't miss it. But this post is about @mixin, don't miss
the explainer, it is
packed with valuable information:
@mixin --box {
aspect-ratio: 1;
inline-size: 100px;
block-size: 100px;
}
.box {
@apply --box;
}
Getting started
#
For CSS Mixins as of writing this, you'll need
Canary and you'll need to
launch it from the command line
with this flag CSSMixins:
open -a "Google Chrome Canary" --args --enable-features=CSSMixins
Go make stuff!
#
You have all the latest information now:
how to enable Canary to understand mixinswhat the basic syntax is likelinks tomore advanced examples and documentation