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

ANTONIO ALTAMIRANO
ANTONIO ALTAMIRANO
9,428 Points

Stuck on Code Challenge. Don't know what i am doing wrong. Next, use a mixin to give the transform property in .main-log

Next, use a mixin to give the transform property in .main-logo a CSS transition. Set the transition duration to .6s. error: Compilation Error! my code:

sass/style.scss
/* Write your SCSS code below. */

// Imports


// Variables


// Page Styles

body {
@import "compass/css3";
@include background(linear-gradient(#3d69b5, #1a335e));
$experimental-support-for-svg: true;
}

.main-logo{
    @include single-transition(transform, 0.6s);
}
index.html
<!DOCTYPE html>
<html>
<head>
  <title>My Compass Project</title>
  <link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
  <div class="main-logo"></div>
</body>
</html>

1 Answer

Hi Antonio,

You should take the @import rule out of the body and place it under the //import.

Like this:

sass/style.scss
/* Write your SCSS code below. */

// Imports
@import "compass/css3";

// Variables


// Page Styles

body {
@include background(linear-gradient(#3d69b5, #1a335e));
$experimental-support-for-svg: true;
}

.main-logo{
    @include single-transition(transform, 0.6s);
}
ANTONIO ALTAMIRANO
ANTONIO ALTAMIRANO
9,428 Points

Thank you. That's where my error was.

Just to clarify for future reference: putting the @import in the body tag scopes it to the body, and doesn't allow you to use it globally.

ANTONIO ALTAMIRANO
ANTONIO ALTAMIRANO
9,428 Points

Thank you Cena Mayo for adding the clarification. You guys are awesome for helping me out. I was going to call it quits for the day and try it again tomorrow. Now I think I will press on for another hour.