@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