Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── sass:string functions ─────────────────────────────────────────────────────

@use 'sass:string';
@use 'sass:list';
@use 'sass:selector';

// Build a BEM modifier selector string dynamically
@function bem($block, $element: null, $modifier: null) {
    $result: $block;

@if $element  != null { $result: $result + '__' + $element; }
    @if $modifier != null { $result: $result + '--' + $modifier; }

@return '.' + $result;
}

// Usage: bem('card', 'header', 'featured') → ".card__header--featured"

// Convert kebab-case to camelCase (basic implementation)
@function kebab-to-camel($string) {
    $parts  : string.split($string, '-');
    $result : list.nth($parts, 1);

@for $i from 2 through list.length($parts) {
        $part   : list.nth($parts, $i);
        $result : $result + string.to-upper-case(string.slice($part, 1, 1))
                          + string.slice($part, 2);
    }

@return $result;
}

// ── sass:list functions ───────────────────────────────────────────────────────

$breakpoints-list: 480px, 640px, 768px, 1024px, 1280px;
$labels          : xs, sm, md, lg, xl;

@each $bp in $breakpoints-list {
    $i     : list.index($breakpoints-list, $bp);
    $label : list.nth($labels, $i);

.container-#{$label} {
        max-width: $bp;
        margin   : 0 auto;
        padding  : 0 1rem;
    }
}

// Append to a list and use it as a multi-value property
$shadows      : 0 1px 3px rgba(0,0,0,.1);
$hover-shadows: list.append($shadows, 0 4px 12px rgba(0,0,0,.15), $separator: comma);

.card {
    box-shadow: $shadows;
    &:hover { box-shadow: $hover-shadows; }
}