Create grid system classes repeated code

[NetanelBasal]

I am trying to make grid system classes like boostrap has, but the problem is i have repeated code in every class like this:

@for $i from 1 through $col-nums {
  .col-#{$i} {
     @include span($i of 12);
  }
}

.col-1 {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 8.33333%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
}

.col-2 {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 16.66667%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
}
.....

There is a way to get around this problem?

[anEffingChamp]

You might be able to use the extends functionality of sass. See
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend.
In that case your code would look like:

.col-1 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 8.33333%;
float: left;
padding-left: 0.83333%;
padding-right: 0.83333%;
}
.col-2 { @extends .col-1; }
.col-3 { @extends .col-1; }

The output should look like:

.col-1,
.col-2,
.col3 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 8.33333%;
float: left;
padding-left: 0.83333%;
padding-right: 0.83333%;
}

[NetanelBasal]

But you does not change the width.

[anEffingChamp]

No problem, this:
.col-1 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 8.33333%;
float: left;
padding-left: 0.83333%;
padding-right: 0.83333%;
}
.col-2 {
@extend .col-1;
width: 16.7%;
}
will output this:
.col-1,
.col-2 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 8.33333%;
float: left;
padding-left: 0.83333%;
padding-right: 0.83333%;
}
.col-2 {
width: 16.7%;
}

[NetanelBasal]

I does not want to generate the width, for this i use susy mixin span. you solution is not good. look at my example in the issue.

[corysimmons]

This could be fixed if Susy had an $output parameter attached to it's mixin that generates column code. Basically you have 3 options: normal (which outputs all code), init (which just outputs initialization code like the box-sizing stuff), and bare (which just outputs the width).

I tried to do this with my grid system but where it's pretty dependent on nth-child stuff I failed. Seems like it'd be an easy addition here though.

[NetanelBasal]

How you output only the width?

[corysimmons]

I don't think Susy offers this ability, but I'm saying it would be a fairly easy fix for them.

Consider this really dumbed down code:

@mixin grid-column($fraction) {
  float: left;
  margin-left: 15px;
  margin-right: 15px;
  width: 100% * $fraction;
}

If there were an $output param it might look like this:

@mixin grid-column($fraction, $output: normal) {
  @if ($output == normal) or ($output == init) {
    float: left;
    margin-left: 15px;
    margin-right: 15px;
  }
  @if ($output == normal) or ($output == bare) {
    width: 100% * $fraction;
  }
}

Then someone could say:

[class*="col-"] {
  @include grid-column($output: init);
}

@for $i from 1 through 12 {
  .col-#{$i} {
    @include grid-column($i/12, $output: bare);
  }
}

And the code outputted would be:

[class*="col-"] {
  float: left;
  margin-left: 15px;
  margin-right: 15px;
}

.col-1 {
  width: 8.333333333%;
}

.col-2 {
  width: 16.666666667%;
}

etc...

And if someone didn't want to use CSS classes, it would default to rendering all the styles.

[NetanelBasal]

Look good, so maybe you are gonna do a pull request?

[corysimmons]

[mirisuzanne]

This is a duplicate of #143. Susy takes a different approach to the repetition issue. Rather than adding new parameters for every use case, we provide all the functions you need to customize your own system. If you want just the width output from span, use the function instead of the mixin: width: span(3 of 7); — the syntax for it is the same. With the Susy functions, you can build any grid system you want. We also provide a way to set global box-sizing, so that doesn't have to be repeated in every instance.

@include border-box-sizing;

[class*="col-"] {
  @include gutters;
  float: left;
}

@for $i from 1 through 12 {
  .col-#{$i} {
    width: span($i of 12);
  }
}

[corysimmons]

👍 I think I like your solution better @ericam

[NetanelBasal]

Thanks this is what i want :)