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

Ryann Green
Ryann Green
11,010 Points

Undefined mixin 'column-span' using Compass

During the Compass Multi-Column layout video, I have run into an error I cannot seem to figure out. For some reason, every time I get to the column-span part, I run into this error: "_layout.scss: Undefined mixin 'column-span'"

I have the compass/css3 folder imported and have even tried doing the /columns specifically as well, but no luck. None of the other column-related mixins are coming up with this error, so I'm not sure what is going on. Here is my code:

@import "compass/reset";
@import "compass/css3";
@import "compass/utilities";
@import "compass/layout"; 
 .main-content {
  @media (min-width: 769px) {
    @include column-count(3);
    @include column-gap(3em);
    @include column-rule(1px solid #ccc);
    h2, h3 {
      @include column-span(all);
    }
  } 
}

Thanks in advance for any help.

           .main-content {
    @media (min-width: 769px) {
        @include column-count(2);
        @include column-gap(2em);
        @include column-rule(1px solid #ccc);
        h2, h3 {
            @include column-span(all);
        }
    }
}

Change count(3) and gap(3em) to count(2); and gap(2em);

4 Answers

Caroline Hagan
PLUS
Caroline Hagan
Courses Plus Student 12,453 Points

Hey Ryann, I'm still learning Sass myself, but it appears it is because you are calling to "include" a mixin, called "column-span" approx 7 lines down, but nowhere in that code is there a mixin with that name. See the example on the Sass website : http://sass-lang.com/guide#topic-6

Ryann Green
Ryann Green
11,010 Points

The reason for this is that I was using the Compass library for Sass. I had imported the file that contained those mixins (ie. compass/layout), and the other includes referencing that file worked, but for some reason column-span would not.

I had the same issue you did Ryann. It was comforting to see it pissing someone else off. I was actually downloading, opening the files directly from the project and experiencing that error. Out of curiosity, are you working out of the terminal or in something like Scout? I stopped using scout and it helped a lot.

Ryann Green
Ryann Green
11,010 Points

Haha. It was very frustrating. I'm glad I'm not the only one it was happening to. I was using Scout, so that could have been the problem. I'll keep that in mind next time I'm using Compass. The whole experience just kind of turned me off of Compass for a while. I've just been sticking to vanilla Sass.

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

I have the same problem while using Scout. Have you guys figured out how to fix this? Should I just stop using Scout?

I didn't figure it out personally. I took the terminal basics course here and after that I wasn't so intimidated by use of the terminal. Assuming you're using a mac what I would suggest. Compass makes using Sass really easy.

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

It seems that this is an Scout problem. When you use the terminal or CodeKit the problem disappears.