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 trialStan Day
36,802 PointsProblems 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
Arthur Verschaeve
20,816 PointsFor 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);
}
}
Arthur Verschaeve
20,816 PointsPseudo elements and classes in SCSS have to be declared with an ampersand. For example, the hover state: &:hover { }
Stan Day
36,802 PointsOk 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
36,802 PointsNice that worked thanks, good job! :)