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

Mark McGuinness
PLUS
Mark McGuinness
Courses Plus Student 26,312 Points

Code Challenge for Compass Typography not working correctly ??

Is there something wrong with the code challenge for compass typography as it is pre-populated with the variables $base-font-size: 16px; and $base-line-height: 24px;.

The first task asks - Challenge task 1 of 5 "First, import the Compass typography module"

So I enter @import "compass/typography/vertical_rhythm"

and then get the message - "Bummer! Invalid CSS after "// Variables": expected selector or at-rule, was "$base-font-size..."

If I delete the two variables and then import the typography module, it pass the task. "Well done! You're doing great!"

So then I move on to task 2

Challenge task 2 of 5 Next, include the mixin that establishes the baseline for vertical rhythm according to the base-font-size variable.

I have tired all sorts here ... entering the variables, the mixin and so on but it just doesn't pass.

This is an example of one variation I tired

$base-font-size: 16px; $base-line-height: 24px; @include establish-baseline;

as per Guils video

but still I get

"Bummer! Invalid CSS after "// Variables": expected selector or at-rule, was "$base-font-size..."

Any ideas ?

5 Answers

Hi Mark,

I would first make sure that you ended your import statement with a semi-colon like this:

@import "compass/typography";

If you leave off the semi-colon then that's one way you can get the invalid css error message that you were getting.

For establish-baseline you're missing the parentheses and argument it takes.

@include establish-baseline($base-font-size);

In this case, it also passes without the argument because it's the default value but you still need the parentheses.

@include establish-baseline();

Correction: It's not required to pass in the $base-font-size variable because it matches the default value but the parentheses are optional if you're not passing in an argument.

I suspect then that the only problem originally was the missing semi-colon after the import statement.

This will pass @include establish-baseline; as long as the semi-colon is there after the import statement.

Mark McGuinness
Mark McGuinness
Courses Plus Student 26,312 Points

Hi Jason

Thanks, I did actually complete this a while ago and it was basically down to a typo and trying to do the challenge when I was extremely tired and my brain not registering a simple typo.

Thanks again for you help and input.

Hi Mark,

You're welcome.

Sorry for the confusion. I knew you solved it already but since the time that I answered I had read the documentation and realized the parentheses aren't required if you're not going to pass any arguments.

I simply wanted to make a correction for future readers.

Hi Mark,

Did you end your import statement with a semi-colon?

Also, the establish-baseline mixin takes a font-size as an argument.

Mark McGuinness
PLUS
Mark McGuinness
Courses Plus Student 26,312 Points

Hi Jason and thanks for responding.

I have done this and triple checked for typos but can't find anything wrong, so am stumped.

Here's one example of what I tried, which is actually the same as in the video, but still not passing

$base-font-size: 16px; $base-line-height: 24px; @include establish-baseline;

I am just wondering that there must be a bug in the code challenge or I'm going mad :(

Mark McGuinness
PLUS
Mark McGuinness
Courses Plus Student 26,312 Points
css
$base-font-size: 16px;
$base-line-height: 24px;
@include establish-baseline;
Mark McGuinness
PLUS
Mark McGuinness
Courses Plus Student 26,312 Points

Hi Jason

Thanks.

Yep, forgot the argument, It was one of those times when the brain just doesn't work due to over tiredness and you keep reading the question again and again but doing the wrong thing.

So simple when someone else points out the mistake.

Cheers :)