Mixins

Create reusable style blocks with mixins — define once, include anywhere, and pass arguments for flexibility.

Mixins

Mixins are reusable blocks of CSS. Define a mixin once, then include it in any selector. They can accept arguments for maximum flexibility — like functions for CSS.

Basic Mixin

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

// Use it with @include
.hero {
    @include flex-center;
    height: 100vh;
    background: #2c3e50;
}

.modal {
    @include flex-center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Compiled CSS */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #2c3e50;
}
.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Mixins with Arguments

@mixin button($bg-color, $text-color: white) {
    background: $bg-color;
    color: $text-color;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.2s;

    &:hover {
        opacity: 0.85;
    }
}

.btn-primary {
    @include button(#3498db);
}

.btn-danger {
    @include button(#e74c3c);
}

.btn-outline {
    @include button(transparent, #333);
    border: 2px solid #333;
}

Default Argument Values

@mixin card($padding: 20px, $radius: 12px, $shadow: true) {
    padding: $padding;
    border-radius: $radius;
    background: white;

    @if $shadow {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }
}

.card { @include card; }                    // All defaults
.card-flat { @include card($shadow: false); }  // No shadow
.card-compact { @include card(12px, 8px); }    // Custom padding/radius

Practical: Media Query Mixin

@mixin responsive($breakpoint) {
    @if $breakpoint == mobile {
        @media (max-width: 576px) { @content; }
    }
    @else if $breakpoint == tablet {
        @media (max-width: 768px) { @content; }
    }
    @else if $breakpoint == desktop {
        @media (max-width: 1024px) { @content; }
    }
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;

    @include responsive(tablet) {
        grid-template-columns: repeat(2, 1fr);
    }

    @include responsive(mobile) {
        grid-template-columns: 1fr;
    }
}

Practical: Typography Mixin

@mixin heading($size, $weight: 700) {
    font-family: 'Outfit', sans-serif;
    font-size: $size;
    font-weight: $weight;
    line-height: 1.2;
    color: #2c3e50;
}

h1 { @include heading(36px); }
h2 { @include heading(28px); }
h3 { @include heading(22px, 600); }
h4 { @include heading(18px, 600); }

Practical: Truncate Text

@mixin truncate($lines: 1) {
    overflow: hidden;
    text-overflow: ellipsis;

    @if $lines == 1 {
        white-space: nowrap;
    } @else {
        display: -webkit-box;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
    }
}

.title { @include truncate; }      // Single-line truncation
.excerpt { @include truncate(3); }  // Truncate after 3 lines

Key Takeaways

Define with @mixin name { }, use with @include name;
Mixins accept arguments — @mixin name($arg1, $arg2: default)
Use default values for optional arguments
Named arguments: @include mixin($shadow: false) for clarity
Mixins eliminate repetition — perfect for buttons, layout, media queries, typography
@content passes a block of styles into a mixin (covered in episode #11)