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 Compass Basics Compass Layout and Typography Compass Layout

Stephen Printup
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points
Posted by Stephen Printup
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

Compass Layout and Typography Challenge 2 of 5

Next, use a utility mixin to make .main-nav a horizontal list. Set the float direction to left and the padding value to 5px.

/* Write your SCSS code below. */

// Imports
@import "compass/css3";
@import "compass/utilities"

// Variables


// Page Styles
.main-nav {
  @include horizontal-list(5px, left);
}

I get:

Bummer! Invalid CSS after "// Page Styles": expected selector or at-rule, was ".main-nav {"

Thank you for your help.

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Stephen,

You're missing a semicolon at the end of your import statement

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Stephen,

I don't see a @mixin anywhere, you will have to create that before using the @include unless there is already one included in the compass/utilities but i don't know how you would know if there was as you don't have access to that file for the challenge.

So i would suggest writing one.

Stephen Printup
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points
Stephen Printup
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

Thank you. After I input the semi-colon it worked, but I'm still slightly confused because that error wasn't on the line I was concentrating on...Oh.... It wouldn't import the utilities without it. I get it, but it's weird I was able to pass the first challenge. Thanks again for your help.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

That is strange Stephen, I've looked at the code of all my sites and I never put a semicolon on the last import, I even had a quick look online at some examples and they didn't have a semicolon on the last import. They said the semicolon is used to separate so don't use on the last one.

Very strange.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I think the semicolon can be left off if it's your last line of code. When doing task 1, the utilities import is your last line of code so it passes ok. Then you add in some more code for task 2 and the utilities import is no longer the last line of code and it causes problems.

I don't think this is a quirk with the code challenge. The exact same thing happens in SassMeister.