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

Stan Day
Stan Day
36,802 Points

Problems with compass code challenge

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

My Answer:

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

Can't figure out what I am doing wrong. Any help is appreciated thanks!

4 Answers

For the last transform, you simply have to @include rotate(-25deg); And you don't need the transform mixin. For me, the code passes like this:

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

Pseudo elements and classes in SCSS have to be declared with an ampersand. For example, the hover state: &:hover { }

Stan Day
Stan Day
36,802 Points

Ok so far now I have this and it still won't validate.

.main-logo {
    @include transform(translateX(-40px));
    @include single-transition(transform, 0.6s);
    &:hover {
        @include transform(rotate(-25deg));
    }
}
Stan Day
Stan Day
36,802 Points

Nice that worked thanks, good job! :)