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) Speeding up Workflow with Sass Creating a Color Palette

Roscoe Coney
Roscoe Coney
13,124 Points
Posted by Roscoe Coney
Roscoe Coney
13,124 Points

What is wrong my code?

Challenge Task 3 of 3

Set the background of the <a> tag to be a 10% desaturated version of the variable, using the desaturate function. (HINT: desaturate works a lot like the lighten function - taking a color, then a percentage!)

My code:

$complement: complement(red);

a {
    color: lighten( red, 5% );
    background: desaturate ($complement, 10% );
}

Following Error Message:

Bummer! Use the 'desaturate' function to desaturate the value in the $complement variable. Apply the result to the background attribute of 'a' tags.

3 Answers

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

You have a space between your mixin name (desaturate) and the opening parenthesis.

$complement: complement(red);

a {
    color: lighten( red, 5% );
    background: desaturate($complement, 10% );
}
Roscoe Coney
Roscoe Coney
13,124 Points
Roscoe Coney
Roscoe Coney
13,124 Points

I cannot believe that was the issue...Thanks!

John Mutch
John Mutch
6,962 Points
John Mutch
John Mutch
6,962 Points

Not sure if this is allowed. I am going to code the steps for the challenge as they were very hard to figure out. With help from Ron McCranie's code.

STEP 1

$text-color: red;
$highlighted-text-color: lighten($text-color, 5%);

a {
  color: $highlighted-text-color;
}

STEP 2

$text-color: red;
$highlighted-text-color: lighten($text-color, 5%);
$complement: complement(red);

a {
  color: $highlighted-text-color;
  background: lighten($complement, 10%);
}

STEP 3

$text-color: red;
$highlighted-text-color: lighten($text-color, 5%);
$complement: complement(red);

a {
  color: $highlighted-text-color;
  background: desaturate($complement, 10%);
}

Hope this was legal and helps others

Ginny Garza
Ginny Garza
21,395 Points
Ginny Garza
Ginny Garza
21,395 Points

Thank you! I couldn't figure out what was wrong.

Luke Pettway
Luke Pettway
16,593 Points
Luke Pettway
Luke Pettway
16,593 Points

I had the same problem, I don't think I've ever seen a nested function fail because of a space like that. Glad I wasn't the only one!