I did not get the meaning of the challenge.

Question

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%);
}

Answer 1 · 2015-05-08T19:20:56Z

May 8, 2015 7:20pm

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?

Welcome to the Treehouse Community

Looking to learn something new?

Unsubscribed User