Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics (retired) Advanced Sass Concepts Interpolation and if/else Loops

Ernest Son
Ernest Son
13,532 Points
Posted by Ernest Son
Ernest Son
13,532 Points

unclear why interpolation is needed for the background image declaration....

So, I get why interpolation is needed in the earlier example, since the red, green, and blue classes do not exist and need to be created.

But, aren't red/green/blue.jpg's already in the image folder? You're passing the $color argument, so.......me no get it.

2 Answers

Sharon Smith
Sharon Smith
8,747 Points
Sharon Smith
Sharon Smith
8,747 Points

You're not creating the jpg's with the interpolation, just calling them up. The interpolation automatically generates links to the matching color image with the right color class & it can generate a whole list of different colors all at once, so you don't have to type in each one by hand. Additionally, if you decide to change your color scheme later- say, to magenta, cyan, & yellow- you just enter the new colors & the interpolation will automatically change all the links to the new colors & their matching graphics. In a short bit of code it might not seem like a difference but on a large site, copy & pasting the same links over & over again, as well as trying to find every instance of "red" to change it to "magenta" is both tedious & time consuming. This speeds up the process considerably- not to mention lessens the chance that something gets missed in the change.

Ernest Son
Ernest Son
13,532 Points
Ernest Son
Ernest Son
13,532 Points

Thank you Sharon, I understand your points. I just didn't understand why, semantically, you had to identify $x with a #{ } here and there, but not in the declarations. Per the example, why wouldn't you have to write it like so?

background : #{$color};

I think this is something I'll understanding better with time.

Thank you for your time!