Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
// Define a mixin @mixin flex-center { display: flex; justify-content: center; align-items: center; } // Mixin with arguments @mixin button($bg, $color: white, $size: 1rem) { display: inline-flex; align-items: center; justify-content: center; padding: 0.5em 1.25em; background: $bg; color: $color; font-size: $size; border: none; border-radius: 6px; cursor: pointer; transition: opacity 0.2s; &:hover { opacity: 0.85; } } // Responsive mixin @mixin respond-to($breakpoint) { @if $breakpoint == 'md' { @media (min-width: 768px) { @content; } } @else if $breakpoint == 'lg' { @media (min-width: 1024px) { @content; } } } // Using mixins .hero { @include flex-center; min-height: 100vh; } .btn-primary { @include button(#6366f1); } .btn-danger { @include button(#ef4444); } .container { width: 100%; @include respond-to('md') { max-width: 768px; } @include respond-to('lg') { max-width: 1024px; } }
Result
Open