1

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 ?

Quentin
  • 1,085
  • 1
  • 11
  • 29
  • The last child of the .parent element has a class of "other", rather than "element". Is this intended or is that a mistake? Because your second selector won't apply to that element because it doesn't have the correct class name. – cimmanon Apr 14 '16 at 13:37

1 Answers1

1

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!

alexbea
  • 1,311
  • 14
  • 25
  • If you believe there is a typo in the question, you should leave a comment asking for clarification (questions that are caused by minor typographical errors, such as "i wrote the wrong class name" should be closed). If you don't have enough rep to post a comment, move on to the next question you can concretely answer without extra clarification. Note that [fixing the class name does not solve the problem](https://jsfiddle.net/L0m0jysa/). Also note that your answer does not actually show how to solve the OP's problem. – cimmanon Apr 14 '16 at 13:42
  • 1
    I answered rather than commented because I don't think OP has a problem, but is not clear on how Neat works. I don't think it was a typo since he consistently used `.element` instead of `.other` in the examples. It seemed clear to me that `.other` would eventually be an additional column as well and he was confused about how `:last-child` worked in this context. – alexbea Apr 14 '16 at 14:03
  • You understand that answers are for *answering the question*, right? They're not for commentary or asking for clarification or for suggesting that it might be possible to fix it if they just try random stuff, oh and btw, good luck with that! This isn't a discussion forum. If there is no problem that can be addressed here, the appropriate action is to flag it as off-topic or vote to close if you have the rep. – cimmanon Apr 14 '16 at 14:08
  • 1
    True. I was neither commenting, asking for clarification, nor suggesting random stuff. I was explaining how Neat works in this context. I've edited the answer to make that more clear. – alexbea Apr 14 '16 at 14:24
  • @alexbea Thank you ! indeed I did not understand how `:last-child` worked. I thought it selected the last child of its genre, not the last child amongst the parent. (I was in a hurry and did not take time to test my example, in fact I run into the problem in a complex project I just put my hands in, and now I understand the problems lie in elements nesting). My question is obsolete – Quentin Apr 15 '16 at 16:38