My Sass Affair
I took a couple hours last week to leave my beloved CoffeeScript land, and dive into some awesome SASS refactors. It reminded me how powerful the compiler really is. At times, I found myself swearing at the syntax, but then I remembered that I was writing CSS, quit my whining and fell a little more in love...
Here's the starting code. Get ready. It's ugly. Don't run:
#gem-progress
float: left
width: 30%
.prog-gem
width: 20%
height: 45px
float: left
&.locked
background-image: url('/assets/journey/grey-gem.png')
background-size: 89%
background-repeat: no-repeat
background-position: 50% 60%
&.current
&#strengths
background-image: url('/assets/journey/blue-gem-outline.png')
background-size: 86%
background-repeat: no-repeat
background-position: 50% 60%
&#others
background-image: url('/assets/journey/green-gem-outline.png')
background-size: 86%
background-repeat: no-repeat
background-position: 50% 60%
&#networking
background-image: url('/assets/journey/pink-gem-outline.png')
background-size: 86%
background-repeat: no-repeat
background-position: 50% 60%
&#approach
background-image: url('/assets/journey/yellow-gem-outline.png')
background-size: 86%
background-repeat: no-repeat
background-position: 50% 60%
&#coworker
background-image: url('/assets/journey/purple-gem-outline.png')
background-size: 86%
background-repeat: no-repeat
background-position: 50% 60%
&.complete
&#strengths
background-image: url('/assets/journey/blue-gem.png')
background-size: 100%
background-repeat: no-repeat
background-position: 50% 60%
&#others
background-image: url('/assets/journey/green-gem.png')
background-size: 100%
background-repeat: no-repeat
background-position: 50% 60%
&#networking
background-image: url('/assets/journey/pink-gem.png')
background-size: 100%
background-repeat: no-repeat
background-position: 50% 60%
&#approach
background-image: url('/assets/journey/yellow-gem.png')
background-size: 100%
background-repeat: no-repeat
background-position: 50% 60%
&#coworker
background-image: url('/assets/journey/purple-gem.png')
background-size: 100%
background-repeat: no-repeat
background-position: 50% 60%
...pheww. That was painful to look at. But here was my refactor:
$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('#{nth($joureny_colors, $i)}-gem.png')
size: 100%
repeat: no-repeat
position: 50% 60%
@if $state == 'in-progress' or $state == 'current'
.#{$state}
&##{$packet}
background:
image: url('#{nth($joureny_colors, $i)}-gem-outline.png')
size: 87%
repeat: no-repeat
position: 50% 60%
After the rewrite, I was a little (lot) excited to haul that piece of junk code out of my, otherwise DRY, perfectly written app (haha), so I sent a tweet:
...and got some love back from none other than the creator of SASS, @chriseppstein with this sweet little refactor:
$journey: (
states: complete in-progress current, packets:
( strengths: blue,
others: green,
networking: pink,
approach: yellow,
coworker: purple
)
)
@function journey-image($state, $packet-color)
@if $state == complete
@return url('#{$packet-color}-gem.png')
@else
@return url('#{$packet-color}-gem-outline.png')
@each $packet, $packet-color in map-get($journey, packets)
@each $state in map-get($journey, states)
.#{$state}
&##{$packet}
background:
image: journey-image($state, $packet-color)
size: if($state == complete, 100%, 87%)
repeat: no-repeat
position: 50% 60%
Lessons:
- The support in the dev communitinty is awesome!
- SASS HAS MAP!!! aka...read the docs.