Adam Argyle

CSS Mixins are ready for experimentation!

Listen Later

CSS Mixins and

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;
}

and using it:

.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 mixins
  • what the basic syntax is like
  • links to
    • more advanced examples and documentation
    ...more
    View all episodesView all episodes
    Download on the App Store
    Adam ArgyleBy