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 Interpolating and if/else

Lachlan ∆
Lachlan ∆
8,026 Points
Posted by Lachlan ∆
Lachlan ∆
8,026 Points

Could somebody please explain this Sass code challenge?

The mixin should use the value in $make as the name of a new class. The class should have a 1px solid black border. Thanks :)

4 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

Your answer is correct with the exception of the @include. Remove it and it should pass.

Also, you have an extra closing curly brace.

 @mixin cars($make, $color) {
  .#{$make} {
    border: 1px solid black;
 }
}
Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

You have to interpolate the $make variable so that whatever is passed into that variable becomes the name of the class. You interpolate variables like so:

#{$variable_name}
Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

The mixin should use the value of $make to create a new class. The new class should be labeled as the value of $make parameter.

to convert a parameter value into text you can use the #{/PARAMETER HERE/}.

example

$color: red;

.#{$color} {
  background: $color;
}

//WILL OUTPUT THE BELOW

.red {
  background: red;
}

I hope this helps.

Lachlan ∆
Lachlan ∆
8,026 Points
Lachlan ∆
Lachlan ∆
8,026 Points

I've had multiple attempts but I get the following error :( "There's something wrong with your Sass stylesheet. Please review your code and try again. Sass Error: Invalid CSS after " }": expected selector or at-rule, was "}". " What am I doing wrong? Thanks for your help 

 @mixin cars($make, $color) {

 .#{$make} {
  border: 1px solid black;
 }

  }  
}

@include cars(audi, black);