Use universal selector in outer-container to remove margin in the last element #31

Closed
kaishin opened this Issue Nov 7, 2012 · 3 comments

Projects

None yet

2 participants

@kaishin

In the current implementation, Neat adds a &:last-child {margin-right: 0} to each selector that uses the span-columns() mixin. Example:

// Sass
section {
  @include outer-container();

  aside {
    @include span-columns(6);
  }

  article {
    @include span-columns(2);
  }
}

// CSS
section aside {
  display: block;
  float: left;
  margin-right: 3.22581%;
  width: 22.58065%;
}
section aside:last-child {
  margin-right: 0;
}

section article {
  display: block;
  float: left;
  margin-right: 3.22581%;
  width: 74.19355%;
}
section article:last-child {
  margin-right: 0;
}

This ends up in unused CSS code, as only article:last-child in the example above is targeted. I was thinking that the same can be achieved if we make & *:last-child {margin-right: 0} part of the outer-container() mixin instead. This also comes with two flaws:

  • Nested universal selector has a performance cost
  • This would make using outer-container() necessary for the elements to float properly, which is not currently the case.

Any thoughts?

@dukex

What do you think about last element isn't a span column? For example:

// Sass
section {
  @include outer-container();

  aside {
    @include span-columns(6);
  }
}

But my markup it:

<section>
  <aside> </aside>
  <footer> </footer>
</section>

the & *:last-child will match <footer>, the idea to add margin-rigth: 0 in span-columns, I think, is because only span columns match with rules

@kaishin

Good point. Right now I'm exploring the idea of disabling auto-omega with a project wide $auto-layout setting. It would default to true, and Neat would work exactly as it does right now. If set to false though, :last-child needs to be applied manually using the new omega() mixin.

@kaishin

After further consideration, this refactor is deemed unnecessary when coupled with a more flexible omega mixin.

@kaishin kaishin closed this Feb 13, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment