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
Richard Nicholls
1,301 PointsStuck, really struggling with this sass just wish I could skip it
Code challenge hurdle
<!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><a href="#">Delicious Food in SF</a></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>.
<span class="link"><a href="/info.html">Read More</a></span>
</p>
</div>
</div>
<div class="entry">
<h1><a href="#">Great Music</a></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.
<span class="link"><a href="/info.html">Read More</a></span>
</p>
</div>
</div>
<div class="footer">
<p>
Thanks for reading my blog! Be sure to check out my <a href="#">other articles</a>.
</p>
</div>
</body>
</html>
/* Write your SCSS code below. */
p {
a {
color: red;
}
> a {
color: blue;
}
}
6 Answers
Kevin Korte
28,148 PointsGood to hear. Post any questions you have to the forum, that's what we are all here for.
Richard Nicholls
1,301 PointsThis is a code challenge, I didn't create any of the code myself
Richard Nicholls
1,301 PointsThanks, I completed the first challenge but I am stuck on the second where you have to use an ampersand.
Kevin Korte
28,148 PointsRichard,
First let me encourage you to continue with Sass. There is a learning curve, but it is sooo worth it. I went through the same thoughts when I started with Sass, but now I couldn't imagine not using it on every project big or small.
Based on your code, I assume you got hung up doing the opacity to 0.5?
Remember that when you are working in a nested attribute, Sass with replace the & with whatever attribute is the parent. So you can do something like
p {
color: red;
&:hover {
opacity: 0.5;
}
}
And Sass will compile to
p {
color: red;
}
p:hover {
opacity: 0.5;
}
Richard Nicholls
1,301 PointsThanks for the help. That code passed the challenge but there was an even more confusing one afterwards, i managed to pass it with Googles help and I will try to persevere with it.
ralphp
1,247 Pointsa few things i noticed- 1) your style sheet is named "style.scss" not "styles.css" AND your link rel points to "style.css" (note the missing 's' from the html source code....and it's not nested in a css folder) 2) your css should be like so- /* Write your CSS code below. */
p a {
color: red; }
a {
color: blue; }
Kevin Korte
28,148 PointsThere is nothing invalid here, Sass is an CSS preprocessor, and it's file type is .scss When Sass is ran, it'll precompile all of it's Sass goodness into plain vanilla CSS, and generate the .css file for us that we would than reference in our HTML doc and serve to the browser, since browsers can not read Sass files as-is.
Also nothing wrong with the code. Sass allows nesting selectors, which allows you, the dev to physically type less and be more efficient.
Sass would take the code from above, and turn it into this at compile time
p a {
color: red;
}
p > a {
color: blue;
}