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
Mark McGuinness
Courses Plus Student 26,312 PointsCode 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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();
Jason Anello
Courses Plus Student 94,610 PointsHi 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
Courses Plus Student 26,312 PointsHi 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
Courses Plus Student 26,312 Pointscss
$base-font-size: 16px;
$base-line-height: 24px;
@include establish-baseline;
Mark McGuinness
Courses Plus Student 26,312 PointsHi 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 :)
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsCorrection: It's not required to pass in the
$base-font-sizevariable 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
Courses Plus Student 26,312 PointsMark McGuinness
Courses Plus Student 26,312 PointsHi 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.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi 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.