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 Getting Started with Compass Getting Started with Compass

Posted by Liz Karaffa
Liz Karaffa
17,576 Points

Code Challenge 5/5 for Getting Started with Compass

Final challenge is: Finally, use a transform mixin to give .main-logo a -25deg rotation on :hover.

I've tried both of the following codes, but with no luck. Am I missing something?

.main-logo {
    @include single-transition(transform, .6s);
    &:hover {
        @include transform(rotate(-25deg));
    }
}

.main-logo {
    @include single-transition(transform, .6s);
}
.main-logo:hover {
    @include transform(rotate(-25deg));
}

Still no luck, any ideas?

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Liz,

It looks like this challenge wants you to specifically use the rotate mixin:

.main-logo {
    @include single-transition(transform, .6s);
    &:hover {
        @include rotate(-25deg);
    }
}

I would stick with your first example where you've nested the hover rule to avoid repetition.

What you tried and what I have here both produce the same css so I don't think what you did is wrong but the challenge must be specifically checking for the rotate mixin.

Liz Karaffa
Liz Karaffa
17,576 Points
Liz Karaffa
Liz Karaffa
17,576 Points

Thanks so much! yeah you're right I just needed rotate!