Arby

@mobalti.bsky.social

38 Followers 41 Following

Frontend Developer https://mobalti.com/

Code snippet showing the upcoming CSS mixins syntax. @mixin --medium() { @result { block-size: 5rem; border-radius: 1.75rem; font: 400 1.5rem/2rem system-ui; gap: 0.75rem; padding: 1.5rem 3rem; } } @mixin --large() { @result { block-size: 6.5rem; font: 400 2rem/2.5rem system-ui; border-radius: 1.75rem; padding: 2rem 4rem; gap: 1rem; } } .button { /* Base/default properties (represent the small size variant) */ block-size: 3rem; border-radius: 1rem; font: 500 1rem/1.5rem system-ui; gap: 0.5rem; padding: 0.75rem 1.75rem; /* Variations using container style queries */ &:not(.small) { @container style(--size-items: medium) { @apply --medium(); } @container style(--size-items: large) { @apply --large(); } } /* Modifier classes for static size instances */ &.medium { @apply --medium(); } &.large { @apply --large(); } }