Difference between span-columns() and row() in Bourbon Neat

Question

What is the difference between @include span-columns(12) and @include row()? Which should I use and when?

Answer 1

Here are the 3 options you have:

div.span-12 {
  @include span-columns(12);
}

div.row {
  @include row();
}

div.fill-parent {
  @include fill-parent();
}

And here is their output:

div.span-12 {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%;
}

div.span-12:last-child {
  margin-right: 0; 
}

div.row {
  *zoom: 1;
  display: block; 
}

div.row:before, div.row:after {
  content: " ";
  display: table; 
}

div.row:after {
  clear: both; 
}

div.fill-parent {
  width: 100%; 
}

If you only want an element to fill its parent, then fill-parent() is the best approach. If you want to add other elements inside the full-width element, then row() will take care of clearing the floats.

Please don't ever use @include span-columns(12) as it ends producing a lot of irrelevant code.