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

I did not get the meaning of the challenge.

In the task 3, I did not understand what I should do.

index.html
<!DOCTYPE html>
<html>
<head>
  <title>Sass Basics - Code Challenge</title>
  <link rel="stylesheet" type="text/css" href="page-style.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Hampton's Blog</h1>
  <div class="entry">
    <h1>Great Music</h1>
      <div class="content">
        <p>
            Here are some of my favorite bands from years past and present: Belle and Sebastian, Pixies, and Daft Punk. Listening to music allows me to focus when I'm programming. 
        </p>
      </div>
      <a href="/info.html">Read More &raquo;</a>
    </div>
</body>
</html>
style.scss
/* Write your SCSS code below. */
$complement: complement(red);
$desaturate: desaturate(red, 10%);
a{
  color:lighten(red,5%);
}

1 Answer

Hi, Kamyar Asadibeiky:

Allow me to break it down for you. The answer is the following:

/* Write your SCSS code below. */
a {
  $complement: complement(red); 
  $desaturatedRed: desaturate($complement, 10%); 
  color: lighten(red, 5%); 
  background: $desaturatedRed; 
}

Task 1

Task one requires you to select all anchor tags in the document (which is scoping how your styles are applied to the HTML document) and make them have a particular version of red described by the challenge of being 5% lighter than 'standard red'.

Standard red refers to the default red browsers fallback to when the CSS color keyword red is used. Other CSS color keywords include skyblue, blue, black, white, tomatored and many more.

Expecting you to use the Sass defined lighten function, that takes a valid color value as its first parameter, and for its second parameter a valid percentage value used to lighten the color provided in the first parameter. task one is solved the following way

a {
  color:  lighten(red, 5%);
}

Task 2

For Task 2, you're asked to use another Sass-defined function called compliment that takes one parameter by default to achieve its core behavior: providing you the compliment of a color

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

Task 3

Finally, Task 3 requires you to use a desaturated version of the color evaluated and stored in the $complement variable as a background for all links. Accordingly, it takes two parameters to know about this color (first parameter), and a valid percentage value to desaturate the passed in color by:

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

Here's the .sass version in case you're used to that way of writing Sass like I am

a 
  $complement: complement(red)
  $desaturatedRed: desaturate($complement, 10%)
  color: lighten(red, 5%) 
  background: $desaturatedRed 

Does all this makes sense as far as the meaning of this challenge?