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

Posted by Previledge Moyo
Previledge Moyo
5,175 Points

creating a color palette

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 lighten function-taking a color,then a percentage)

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. */
$color:red;
a{
color:lighten($color,5%);
}

$complement:complement(red);

$desaturate:red;
a{
background:desaturate(red,10%);
}

1 Answer

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Hi Previledge Moyo

Okay, I see you have some repeating codes for colors and we can leave complement variable on the first line.

Let 's make it short and easier. 

/* Write your SCSS code below. */
$complement: complement(red);

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

background: desaturate($complement, 10%); 
}

Hope that helps.

Previledge Moyo
Previledge Moyo
5,175 Points

You came to my rescue. That really helped. Its just that Im doing Web Design for the first time so the Sass Basics course has been the most challenging one for me. Im also experiencing another confusing challenge which states that: Write a function called double that multiplies its input by 2. Your help will be appreciated. Thank You.

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

No worry it happened to us before, it was just hard to grasp and all we can do is tons of practices and repeating it to sink in in our memory. However, I can give you hint @ 06:51, this would give you idea of how to write function like @function. 

@function double($input) {
    @return $input * 2;
}

Hope it will solve your question, please mark it as best on this question and any others you previously post to help people's similar questions. :)