Sass mixin for auto-numbering with CSS | Ahmed El Gabri - Front-end Engineer

PHOTO EMBED

Wed Jan 05 2022 04:40:37 GMT+0000 (Coordinated Universal Time)

Saved by @wnakswl #list #mixin

@mixin auto-numbers($numbered-element, $sep, $counter: item, $nested-parent: false ){
    $sel: ();
    @if $nested-parent {
        $sel: append($sel, unquote($nested-parent));

        #{$nested-parent}{
            list-style: none;
            margin-left: 0;
        }
    }
    $sel: append($sel, unquote('&'), comma);

    #{$sel}{
        counter-reset: #{$counter};
        > #{$numbered-element}{
            &:before{
                counter-increment: #{$counter};
                content: if($nested-parent, counters(#{$counter}, "#{$sep} ") "#{$sep} ", counter(#{$counter}) "#{$sep} ") ;
            }
        }
    }
}
content_copyCOPY

https://gabri.me/blog/sass-mixin-for-auto-numbering-with-css