in Web & Tech

Resetting the omega Mixin in Bourbon Neat

While having a hard time making automatic rows with Bourbon Neat I stumbled upon this awesome little mixin, thankfully shared by Josh Fry.

It allows you to reset the nth-child margins and clearings, most helpful when you want to create different sized automatic rows at various breakpoints.

I just keep it here for my own future reference:

1.) Set the flexgrid column and gutter in your grid settings:

$fg-column: $column;
$fg-gutter: $gutter;

2.) Save the omega-reset mixin:

@mixin omega-reset($nth) {
  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
  &:nth-child(#{$nth}+1) { clear: none }
}

3.) Use it:

.drupal-features {
  li {  
    @include media($desktop) {
      @include span-columns(4);
      @include omega(3n);
    }
    @include media($medium) {
      // reset the previoulsy set omega(3n) so it won't conflict 
      // with the omega(2n) used at this breakpoint
      @include omega-reset(3n);
      @include span-columns(6);
      @include omega(2n);
    }
  }
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)

  • Related Content by Tag