Instantly share code, notes, and snippets.

Embed
What would you like to do?
I love sass! Just showing off a cool function.
$journey_states: complete, in-progress, current
$joureny_packets: strengths, others, networking, approach, coworker
$joureny_colors: blue, green, pink, yellow, purple
@each $packet in $joureny_packets
@each $state in $journey_states
$i: index($joureny_packets, $packet)
@if $state == 'complete'
.#{$state}
&##{$packet}
background-image: url('/assets/journey/#{nth($joureny_colors, $i)}-gem.png')
background-size: 100%
background-repeat: no-repeat
background-position: 50% 60%
@if $state == 'in-progress' or $state == 'current'
.#{$state}
&##{$packet}
background-image: url('/assets/journey/#{nth($joureny_colors, $i)}-gem-outline.png')
background-size: 87%
background-repeat: no-repeat
background-position: 50% 60%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment