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);
    }
  }
}

Write a Comment

Comment

  • Related Content by Tag