@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} ") ;
}
}
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter