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 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,596 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!