css-mixins-functions.md

CSS Mixins & Functions

• 2025-03-26 — CSS Mixins are ready for experimentation
• Official spec
• Intent to Ship: CSS Custom Functions (@function)
• CSS Mixins & Functions Explainer
• Proposal: Custom CSS Functions & Mixins
• Custom CSS Custom Functions + Nested Style Queries: --light-dark()

@mixin --box {
  aspect-ratio: 1;
  inline-size: 100px;
  block-size: 100px;
}

.box {
  @apply --box;
}

@function --light-dark(--light, --dark) {
   result: var(--light);
   @media (prefers-color-scheme: dark) {
     result: var(--dark);
   }
}

div {
  background-image: --light-dark(black-logo.png, white-logo.png);
}