How do I efficiently remove margin of the last column using susy?

Question

Im using susy to make a simple 12 columns grid. I think I've got it more or less figured out except for one thing. I've got the following markup:

<div class="news">
    <div class="tweet">
        <p>the tweet<p/>
    </div>
    <div class="blog">
        <h3>Recent News</h3>
        <div class="excerpt">
            <p>the excerpt<p/>
        </div>
        <div class="excerpt">
            <p>the excerpt<p/>
        </div>                
    </div>
</div>

I want the "news" to take up a full row, the "tweet" to take up half of this row and the "blog" to take up the other half. The two "excerpts" should then take up half of the "blog" column. I therefore have the following scss:

.news {
    @include container();
}
.tweet {
    @include span(6);
}
.blog {
    @include span(6 at 7);
}
.excerpt {
    @include span(3 of 6);
}

Of course the second excerpt now has a right gutter too which makes it jump on a new line. So I thought I would use the last flag for the :last-child of the excerpts which susy provieds but this doesn't work. The right gutter was already set by the @include span(3 of 6) and will therefore stay. The only thing that does the trick is removing the right margin like so:

.excerpt:last-child {
    margin-right: 0;
}

This works but I think there has to be another solution. Is there?

score 6 · Accepted Answer · answered Mar 22 '14 at 17:22

6

I still haven't tried Susy 2, so take this a suggestion. With the old version of Susy you had omega mixin to indicate the last element.
Following the upgrade documentation this is what they suggest for version 2.0:

// Susy 1.x
.old { @include nth-omega(last); }

// Susy 2.x
.new:last-child { @include omega; }

Source

UPDATE
I realized that omega has been replaced by last in Susy 2.x.
So I think that the correct answer to your question would be

.excerpt:last-child { @include last; }

answered Mar 22 '14 at 17:22

pasine

11,311
10
49
81

Both `omega()` and `last()` are supported in Susy 2, and can be used as shown here. They will remove any edge gutters that need to be removed. You can also use the `last` or `omega` keywords as shown in another comment. – Miriam Suzanne Mar 22 '14 at 18:40
Nice, thanks @notme for the answer! I had it figured out for susy 1.x but I didn't find the solution for 2.x. – Flavio Mar 23 '14 at 02:36

score 2 · Answer 2 · answered Mar 22 '14 at 17:13

2

Shouldn't your .tweet and .blog be indented below .news. Then your .excerpt should be indented below .blog. I wonder if it might work if you have:

.blog {@include span(last 6 of 12);}
    .excerpt {@include span(3 of 6);}

It might be worth a try!

answered Mar 22 '14 at 17:13

prasutagus

1,383
10
9

`span(last 6)` and `span(6 at 7)` have the same effect. – Miriam Suzanne Mar 22 '14 at 18:41

How do I efficiently remove margin of the last column using susy?

2 Answers2