Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── Defining mixins ───────────────────────────────────────────────────────────

// Simple mixin — no arguments
@mixin clearfix {
    &::after {
        content : '';
        display : table;
        clear   : both;
    }
}

// Mixin with required argument
@mixin size($width, $height) {
    width : $width;
    height: $height;
}

// Mixin with optional arguments (default values)
@mixin border-radius($radius: 4px) {
    -webkit-border-radius: $radius;
    -moz-border-radius   : $radius;
    border-radius        : $radius;
}

// Mixin with multiple defaults and named arguments
@mixin button-style(
    $bg       : #3498db,
    $color    : #fff,
    $padding  : 0.6rem 1.2rem,
    $radius   : 4px
) {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    background-color: $bg;
    color           : $color;
    padding         : $padding;
    border-radius   : $radius;
    border          : none;
    cursor          : pointer;
    transition      : background-color 0.2s;

&:hover { background-color: darken($bg, 10%); }
}

// ── Including mixins ──────────────────────────────────────────────────────────

.container { @include clearfix; }

.avatar    { @include size(48px, 48px); }

.card      { @include border-radius(8px); }

.btn-primary   { @include button-style; }  // all defaults
.btn-danger    { @include button-style($bg: #e74c3c); }
.btn-large     { @include button-style($padding: 0.9rem 2rem, $radius: 6px); }