Susy reusable responsive columns

Question

I'm trying to wrap my head around Susy. I think I'm going to like it. Just need to work with it more. I'm basically trying to create reusable columns that I can use throughout a site. I'm coming from using the Foundation grid, so maybe I'm not thinking about this right?

I'd need to be able to target those columns. I've read a few articles that say we shouldn't be filling our divs with classes like column-2 or small-6. I guess I'm not seeing how you target the divs if I don't tell it what I expect.

The code below works, but is it very Susy? Is it the right approach? I'd have to create similar rules for all 12 column widths. I'd have to decide up front how I want those columns to break. Do I want the span 6 columns to span 6 all the way down to medium or should they change to span 12. These rules would have to be determined up front.

If this is even the right approach. Any help, guidance or pointers is appreciated.

HTML

<div class="row">
    <div class="column-6">
        <div class="column-2"></div>
        <div class="column-2"></div>
        <div class="column-2"></div>
        <div class="column-2"></div>
        <div class="column-2"></div>
        <div class="column-2"></div>
    </div>
    <div class="large-6">
        <!-- Large image goes here -->
    </div>
</div>

SUSY SASS

$susy: (
    columns: 12,
    gutters: 1/4,
    container: 64em,
    global-box-sizing: border-box,
 );

$medium: 30em;
$large: 64em;

.column-2 {
    @include span(12 last);

    @include breakpoint($medium) {
        @include span(6);
        &:nth-child(2n) {
            @include last;
        }
    }

    @include breakpoint($large) {
            @include span(2);
            &:nth-child(2n) {
                @include span(2);
            }
        &:last-child {
          @include last;
        }
    }
}

.column-6 {
    @include span(12 last);

    @include breakpoint($medium) {
        @include span(12);
        &:nth-child(2n) {
            @include last;
        }
    }
}

Answer 1

You've got the right idea. Susy is different from Foundation and Bootstrap in that we declare the responsiveness in our Sass instead of filling the html with class like "large-3 pull.."

I usually name my classes something more meaningful that "column-6" like "main-content". Other than that it looks like the right approach.

@include span(12 last);

You don't really need to specify last here since it's spanning the full width.

@include full; 

Would probably be more appropriate, or just

@include span();

Which will default to your columns defined in the settings.