How to get a 1px border between columns?

Question

What is the preferred / cleanest method to draw a 1px border between two Susy grid items, in the center of the gutter?

Susy creates a gutter by adding a margin-right to a grid item, so I can't simply add a border-right (like, for instance, you can do with Zen Grids, which creates gutters by applying half a gutter-width of padding on both sides).

I guess it can be done using the with-grid-settings() mixin to define an alternative grid without gutters, but that feels like a messy solution.

Answer 1

There isn't a great solution at the moment, but I hope to have one in the next major release. What you can do, is create your own math using the Susy functions (really the most powerful part of Susy). Something like this:

.left-column {
  @include box-sizing(border-box);
  float: left;
  width: columns(2) + gutter()/2;
  padding-right: gutter()/2;
  margin-right: gutter()/2;
  border-right: 1px solid;
}