CODEWITHSUNDEEP
htmlcsssasssusy-compasssusy-sass
Flavio
Flavio

Reputation: 1587

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

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?

Upvotes: 3

Views: 3957

Answers (2)

pasine
pasine

Reputation: 11543

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; }

Upvotes: 6

prasutagus
prasutagus

Reputation: 1523

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!

Upvotes: 2

Related Questions