CSS Mixin and Macro Polyfill - Basic Examples
1. Simple Macro — Reusable Card Base
@macro --card-base { padding: 20px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .simple-card {
@apply --card-base; background-color: #e3f2fd; }
This card uses the --card-base macro for
consistent styling!
2. Macro — Reset List
@macro --reset-list { margin: 0; padding: 0; list-style:
none; } .nav-list { @apply --reset-list; }
3. Combining Multiple Macros
.centered-box { @apply --center-text; @apply --card-base;
background-color: #fff3e0; }
This box combines two macros: centering and card base!
4. Parameterized Mixin — Colored Box
@mixin --colored-box(--bg <color>: lightblue, --text
<color>: black) { @result { background-color:
var(--bg); color: var(--text); padding: 20px; border-radius:
8px; } } .blue-box { @apply --colored-box(#2196f3, white); }
.green-box { @apply --colored-box(#4caf50, white); }
.coral-box { @apply --colored-box(coral, white); }
Blue Box
Green Box
Coral Box
5. Responsive Text Mixin
@mixin --responsive-text(--large-size: 24px, --small-size:
16px) { @result { font-size: var(--large-size); @media
(width < 768px) { font-size: var(--small-size); } } }
.responsive-heading { @apply --responsive-text(28px, 18px);
}
This heading changes size based on screen width!
6. Grid Layout Mixin
@mixin --grid-layout(--columns: repeat(3, 1fr), --gap: 20px)
{ @result { display: grid; grid-template-columns:
var(--columns); gap: var(--gap); } } .grid-container {
@apply --grid-layout(repeat(3, 1fr), 15px); }
7. Theme Card Mixin
@mixin --theme-card(--bg <color>: #fff, --fg
<color>: #333, --border <color>: #ddd) { @result
{ background-color: var(--bg); color: var(--fg); border: 1px
solid var(--border); } } .dark-card { @apply
--theme-card(#2d3748, #e2e8f0, #4a5568); } .light-card {
@apply --theme-card(#ffffff, #2d3748, #e2e8f0); }
Dark Theme Card
Light Theme Card