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

Ryann Green
Ryann Green
11,010 Points
Posted by 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.

Fran M
Fran M
20,141 Points 
           .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
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 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
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.

Timothy Hooker
Timothy Hooker
15,323 Points
Timothy Hooker
Timothy Hooker
15,323 Points

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
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
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?

Timothy Hooker
Timothy Hooker
15,323 Points
Timothy Hooker
Timothy Hooker
15,323 Points

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
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.