Changing from 4 to 3 columns with omega with Susy

Question

This is certainly easiest to show with some code:

.container{
    .gallery {
        ul {
            @include clearfix;
        }
        li {
            @include span-columns(1,4);

            &:nth-child(4n) {
                @include omega;
            }
        }
    }

    @include at-breakpoint($large-columns) {
        .gallery {
            li {
                @include span-columns(1,3);

                &:nth-child(4n) {
                    @include remove-omega;
                }
                &:nth-child(3n) {
                    @include omega;
                }
            }
        }
    }
}

I'm starting out with 4 columns with the 4th being omega, then I want to change over to 3 columns, with the 3rd being omega. The correct elements are floated left/right correctly, but every 4th gets a wrong margin-right...

Am I doing this right? Or rather, what am I doing wrong?

Thanks for reading, /Andy

Answer 1

your question is misleading because we don't know the value of $large-columns. I assumed that value might be 59em 3 - but that works perfectly. It seems the value is actually just 59em - which is causing your problem.

If you set a breakpoint without a column-count, Susy calculates a new context based on your $column-width and $gutter-width settings. That doesn't cause any problem for span-columns(1,3) because you override the global context with an explicit one (3). But remove-omega also needs to know the context (in order to apply gutters) and you don't pass one - so it uses the global context.

You have two options:

1. You can change the breakpoint: at-breakpoint(59em 3)
2. You can pass an explicit context: remove-omega(3).