Search code examples
sassbourbonneat

Avoid span-column to set right-margin for :last-child

Given the HTML : 

<div class="parent">
    <div class="element"></div>
    <div class="other"></div>
</div>

And this Sass :

.parent {
  .element {
        @include span-columns(2.5 of 8);
  }
}

It generates the CSS :

.parent .element {
  float: left;
  display: block;
  margin-right: 3.22581%;
  width: 29.03226%;
}

.parent .element:last-child {
  margin-right: 0;
}

The part with :last-child is bothering me, because it overrides the first rule with right-margin that I want to keep. How do I prevent Neat from adding the :last-child rule ? Or what workaround should I do to set my desired right margin ?

Solution

  • I think you're okay here. Neat's span-columns() mixin works by establishing an element as a column with the classes you copied above, including right margin for a gutter between columns. It then uses the :last-child pseudo-class to remove the gutter margin on the last column so you don't have unnecessary space there.

    Thinking this out, the .element div in your example isn't the :last-child, so that particular div's right margin will be untouched. I threw this in a JSBin to show you: http://jsbin.com/wawopef/edit?html,css,output. I made .other a column as well since it seemed clear that you intended for it to be one. The .element div still has its margin, then.

    If you really wanted to override the rule you could do so by rewriting the mixin, but A) that's probably not what you want to do and B) this is sort of part of using someone else's grid framework. If we follow their documentation it should work fine. Or the framework is bad, which fortunately Bourbon and Neat are not!