Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Max Kutner
Max Kutner
7,595 Points

How do I use the value of a variable to define a class in sass?

Working on a challenge in Sass basics and one of the tasks is to use the value of a variable to define a new class. The only previous task in this challenge was to define a mixin with two variables. I attempted to solve using the attached code but the prompt won't accept. Please help!

-Max

1 Answer

Erik McClintock
Erik McClintock
45,783 Points

Max,

For this, you'll need to use the interpolation features of SCSS.

You can read a little more about interpolation in SCSS at the following links:

Two Handy and Advanced SASS Features and their Limitations

SASS Documentation

On the quick and dirty, though, the syntax for interpolation is as follows:

#{ $varGoesHere }

So, for the second task of this challenge, your mixin would look like this:

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

Notice that there is a dot (.) in front of the interpolation syntax - this is because the challenge wants you to create a class name specifically out of the interpolated variable, so as always when we target a class selector, we need the dot preceding the class name.

Hope those articles and this quick syntax example help!

*QUICK NOTE: I add spaces around the arguments passed into braces and brackets and parenthesis in my code to help with clarity and readability, but sometimes the code challenges won't accept that. If you find yourself running into any issues where your code looks accurate but the challenge still won't accept it, make sure you look at all possible syntax oddities as one of the options during your debugging process. For example, in the third task of this challenge, the code wouldn't accept my interpolation of #{ $color }, but would accept it without the spaces, as #{$color} (even though task 1 of the same challenge accepted #{ $make } with spaces just fine). Just something to keep an eye out for.

Erik