{
  "$type": "site.standard.document",
  "description": "Here's how to get started with CSS @mixin in Chrome Canary.",
  "path": "/css-mixins-ready-for-experimentation",
  "publishedAt": "2025-03-26T14:43:21.818Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css"
  ],
  "textContent": "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",
  "title": "CSS Mixins are ready for experimentation!"
}