Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── Variable argument lists ($args...) ────────────────────────────────────────

// Accepts any number of box-shadow values
@mixin box-shadow($shadows...) {
    -webkit-box-shadow: $shadows;
    -moz-box-shadow   : $shadows;
    box-shadow        : $shadows;
}

.card   { @include box-shadow(0 2px 4px rgba(0,0,0,.1)); }
.modal  { @include box-shadow(0 8px 32px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.1)); }

// ── Unpacking a list into arguments ──────────────────────────────────────────

@mixin gradient($direction, $start-color, $end-color) {
    background: linear-gradient($direction, $start-color, $end-color);
}

$brand-gradient: (to right, #3498db, #2ecc71);

.hero {
    @include gradient($brand-gradient...);  // unpacks list as 3 arguments
}

// ── Mixin with keyword arguments map ─────────────────────────────────────────

@mixin transition($props...) {
    // $props is an arglist; keyword arguments are accessible via keywords()
    $props-map: keywords($props);
    $property  : map.get($props-map, 'property')  or all;
    $duration  : map.get($props-map, 'duration')  or 0.3s;
    $easing    : map.get($props-map, 'easing')    or ease;
    $delay     : map.get($props-map, 'delay')     or 0s;

transition: $property $duration $easing $delay;
}

.btn {
    @include transition($property: background-color, $duration: 0.2s);
}

// ── Well-documented mixin example ─────────────────────────────────────────────

/// Visually hide an element while keeping it accessible to screen readers.
/// @param {Boolean} $focusable [false] - Allow element to be focusable when navigated to.
@mixin visually-hidden($focusable: false) {
    position: absolute;
    width   : 1px;
    height  : 1px;
    padding : 0;
    margin  : -1px;
    overflow: hidden;
    clip    : rect(0,0,0,0);
    border  : 0;

@if $focusable {
        &:active,
        &:focus {
            position  : static;
            width     : auto;
            height    : auto;
            overflow  : visible;
            clip      : auto;
        }
    }
}