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

Posted by Matthew Stewart
Matthew Stewart
9,112 Points

Compass Basics Code Challenge Help

So the code challenge is this:

Next, use a mixin to give body a linear-gradient background. Make the start color #3d69b5 and the end color #1a335e.

This is the code I used

/* Write your SCSS code below. */

// Imports
@import "compass/css3"

// Variables


// Page Styles
body {
    @include background-image(linear-gradient(left, right, #3d69b5, #1a335e))
}

I'm getting an error here that isn't making a lot of sense to me, Invalid CSS after "body ": expected selector or at-rule, was "{"

I actually got this same error in the first part of the challenge but fortunately the body tag was not needed for that step so I was able to delete it and pass through. I can't figure out if my code is wrong or if there is something buggy with this code challenge. Any help would be great!

4 Answers

Hayden Taylor
Hayden Taylor
5,076 Points
Hayden Taylor
Hayden Taylor
5,076 Points

I can't test your code so I am assuming its because you left out a ;

@include background-image(linear-gradient(left, right, #3d69b5, #1a335e)); <--- I think thats where it goes.

Mohammed Asif Anwar
Mohammed Asif Anwar
5,380 Points
Mohammed Asif Anwar
Mohammed Asif Anwar
5,380 Points

hi i am having problem with this task and this is what i did

Next, use a mixin to give body a linear-gradient background. Make the start color #3d69b5 and the end color #1a335e.

so i did body {@include background(linear-gradient(#3d69b5, #1a335e));}

but it is saying Make sure you're including the correct mixin in the body rule

Armando Flores
Armando Flores
10,059 Points

Hi Mohammed, It took me a while but, my correct code was.

@include background(linear-gradient(#3d69b5, #1a335e));

Not too sure how it's different than yours. Maybe something with the body?

Matthew Stewart
Matthew Stewart
9,112 Points
Matthew Stewart
Matthew Stewart
9,112 Points

Great catch! Unfortunately I'm still getting the same error even though I added the semi-colon.

Hayden Taylor
Hayden Taylor
5,076 Points
Hayden Taylor
Hayden Taylor
5,076 Points

you also need a ; at the import statement.

@import "compass/css3"; <--- right there.

Matthew Stewart
Matthew Stewart
9,112 Points
Matthew Stewart
Matthew Stewart
9,112 Points

That was it! It's so weird it let me pass that part of the challenge. Thanks!

Hayden Taylor
Hayden Taylor
5,076 Points
Hayden Taylor
Hayden Taylor
5,076 Points

np! remember your ;;;;;;;;;