CSS Mixin/Macro Polyfill - Advanced Examples

1. Responsive Grid with @contents

Using @macro with @contents to inject custom grid column definitions:

					@macro --responsive-grid { display: grid; gap: 30px;
					@contents; } .responsive-grid { @apply --responsive-grid {
					grid-template-columns: repeat(3, 1fr); @media (width <
					768px) { grid-template-columns: 1fr; } } }
				

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

2. Progressive Enhancement for Animations

Cards with hover effects that respect motion preferences:

					@mixin --animated-card(--shadow-base: ..., --shadow-hover:
					...) { @result { box-shadow: var(--shadow-base); transition:
					all 0.3s cubic-bezier(0.4, 0, 0.2, 1); @media
					(prefers-reduced-motion: reduce) { transition: none; } } }
					.animated-card { @apply --animated-card; }
				

Hover over me!

This card uses CSS transforms and transitions, with @media (prefers-reduced-motion) inside the mixin.

3. Gradient Text Effect (from the spec)

					@mixin --gradient-text(--from <color>: #667eea, --to
					<color>: #764ba2, --angle: 45deg) { --gradient:
					linear-gradient(var(--angle), var(--from), var(--to));
					@result { background: var(--gradient); color: transparent;
					background-clip: text; } } .modern-text { @apply
					--gradient-text; } .modern-text-alt { @apply
					--gradient-text(#ff6b6b, #ee5a24, 135deg); }
				

Default Gradient Typography

Custom Gradient Typography

4. Accessible Buttons

Buttons that respect user preferences for reduced motion:

					@mixin --accessible-button(--bg <color>: #007acc,
					--bg-hover <color>: #0056b3) { @result { background:
					var(--bg); transition: all 0.2s ease; @media
					(prefers-reduced-motion: reduce) { transition: none; } } }
					.accessible-button { @apply --accessible-button; }
					.accessible-button-alt { @apply --accessible-button(#4caf50,
					#388e3c); }
				

5. Dark Mode Support

					@mixin --dark-mode-card(--light-bg: #ffffff, --dark-bg:
					#2d3748) { @result { background: var(--light-bg); @media
					(prefers-color-scheme: dark) { background: var(--dark-bg); }
					} } .theme-card { @apply --dark-mode-card; }
				

Theme-Aware Card

This card automatically adapts to your system's dark mode preference using @media inside @result.

6. GPU-Optimized Performance (@macro)

					@macro --gpu-optimized { will-change: transform;
					backface-visibility: hidden; perspective: 1000px; }
					.performance-optimized { @apply --gpu-optimized; }
				

This element uses performance-optimized CSS properties applied via a simple @macro.

7. Advanced Typography (@mixin with font variation)

					@mixin --advanced-typography(--weight: 400, --smoothing:
					antialiased) { @result { font-variation-settings: "wght"
					var(--weight); text-rendering: optimizeLegibility;
					-webkit-font-smoothing: var(--smoothing); } }
					.advanced-typography { @apply --advanced-typography; }
					.advanced-typography-bold { @apply
					--advanced-typography(700, antialiased); }
				

Regular weight typography with optimized rendering.

Bold weight typography with optimized rendering.

8. Responsive Container with @contents

					@macro --responsive-container { max-width: 1200px; margin: 0
					auto; padding: 20px; @contents; } .content-container {
					@apply --responsive-container { background: #f0f8ff;
					border-radius: 12px; } }
				

This container uses @contents to inject custom background and border-radius alongside the macro's base styles.

9. Logical Properties (@macro)

					@macro --logical-spacing { margin-inline: 20px;
					padding-block: 15px; border-inline: 2px solid #007acc; }
					.logical-properties { @apply --logical-spacing; }
				

This element uses logical properties via @macro, working correctly with different writing modes and directions.