CSS @mixin and @apply -- Native Mixins Are Coming

CSS @mixin and @apply -- Native Mixins Are Coming

The last major reason to use Sass -- mixins -- is going native. CSS now has @mixin and @apply in Chrome Canary, and it's expected to ship in Chrome 146.

The Syntax

@mixin --center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero {
  @apply --center;
  min-height: 100vh;
}

Mixins with Parameters

You can pass values through custom properties:

@mixin --truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: var(--max-width, 200px);
}

.title {
  --max-width: 300px;
  @apply --truncate;
}

Common Design System Mixins

@mixin --visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@mixin --responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min-col, 250px), 1fr));
  gap: var(--grid-gap, 1rem);
}

Browser Support

Chrome Canary behind flag. Expected in Chrome 146. Other browsers will follow.

The good news is this doesn't mean Sass is immediately irrelevant -- Sass still has loops, conditionals at the stylesheet level, and module systems. But for the most common use case -- reusable blocks of declarations -- native CSS mixins are the future.

Happy coding!

If you want to go deeper and learn how to build real, production-ready CSS design systems step by step, check out my full course here: CSS Design Systems Course If you found this helpful, I'd love to connect! Follow me on Twitter/X @alexandersstudi or LinkedIn for more CSS and design system tips.