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) Variables, Mixins, and Extending Selectors Defining Variables

Challenge Task 2 of 4 Use the "lime" variable to set the color of every link/anchor tag on the site.

please help

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="sidebar">
    <div class="inner_sidebar">
      Thanks for the visit!
    </div>
  </div>
  <div class="entry">
    <h1>Delicious Food in SF</h1>
      <div class="content">
        <p>
          You know what my favorite restaurant in San Francisco is? The answer is that there are so many great restaurants that I couldn't choose one. But honorable mentions include <a href="#">Mr. Chow's</a>, <a href="#">Live Sushi</a> and <a href="#">Piccino</a>. 
          <a href="/info.html">Read More</a>
        </p>
    </div>
  </div>
</body>
</html>
style.scss
/* Write your SCSS code below. */
$lime:#090 {
a
}

3 Answers

Kaetlyn McCafferty
Kaetlyn McCafferty
12,193 Points

What you've done wrong here is used $lime as a selector: lime is a variable that acts as a placeholder for it's assigned color, not a selector. Instead, you need to use the 'a' selector (for the links), and pass $lime in as the variable for it's color: rule. Check this out:

$lime : #090;
a { color: $lime; }

In the first line, I've created a variable called $lime and assigned it a color. In the 'a' selector, I've set the links' color to $lime. Bingo!

Nicholas Olsen
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points

First you have to set the $lime variable like this:

$lime: #090;

Then you set all of the links to that color, like this:

a {
    color: $lime;
}

So the complete source code should look something like this:

$lime: #090;

a {
    color: $lime;
}
Kaetlyn McCafferty
Kaetlyn McCafferty
12,193 Points

AH! How on earth do you get the nice colours like that when you post the code? I've been trying to figure it out!

Kaetlyn McCafferty Wrap your code with 3 backticks (```) on the line before and after your code. You can also specify what the syntax you're writing on is right after the three first backticks.

You can see more on that and some other formatting options if you click on the Markdown Cheatsheet link below the answer/comment box.

I cant get pass this !! I get this error: Bummer! There's something wrong with your Sass stylesheet. Please review your code and try again. Sass Error: Invalid CSS after "a ": expected selector or at-rule, was "{"

Here is my code:

/* Write your SCSS code below. */ $lime: #090

a { color: $lime; }