0

So I'm creating a very simple grid and want to limit the amount of repeated declarations.

My Scss grid

$columns: 12;
$margin: 10;
$max-width: 1200;

// do not edit these values
$layout-margin-width: $max-width + $margin * 2;
$percent-margin: $margin / $layout-margin-width;

// Grid Container
.main {
    max-width: $max-width + px;
    margin: 0 auto;
        &:before,
        &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

// Grid Columns
@for $i from 1 through $columns {
    .grid-#{$i} {
        width: ( ($i / $columns) - 2 * $percent-margin) * 100%;
        padding: 0;
        margin: 0 $percent-margin * 100%;
        float: left;
    }
}

Which outputs to

.main { max-width: 1200px; margin: 0 auto; }
.main:before, .main:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.grid-1 { width: 6.69399%; padding: 0; margin: 0 0.81967%; float: left; }

//

.grid-12 { width: 98.36066%; padding: 0; margin: 0 0.81967%; float: left; }

That creates a lot of repeating CSS so I'd like to be able to have a list the grid class names together and have float:left etc in a single declaration, like this

.grid-1,
.grid-2,
//
.grid-12 {
    float:left;
    //other declarations
}

How do I structure the Scss loop to do this?

EJP
  • 181
  • 4
  • 13
  • Thanks, I tried to find what I was looking for but couldnt come up with anything – EJP Feb 05 '14 at 18:27

1 Answers1

0

I think you can do something like this using @extend.

Example

%grid {
   float:left;
}

@for $i from 1 through $columns {
    .grid-#{$i} {
        width: ( ($i / $columns) - 2 * $percent-margin) * 100%;
        padding: 0;
        margin: 0 $percent-margin * 100%;
        @extend: %grid;
    }
}

This will then output your css like this.

.grid-1,
.grid-2,
.grid-3 {
    float: left;
}
Colin Bacon
  • 15,436
  • 7
  • 52
  • 72