Neat-Omega Family for Bourbon Neat (3.x.x+)

The Omega family is a group of mixins that accomplish several supplemental goals within the Bourbon-Neat framework.

Originally created to address: https://github.com/thoughtbot/neat/issues/543

Install

with NPM

• npm install --save neat-omega
• add @import neat-omega after your @import neat statement in your scss.
• add node_modules/neat-omega/core to your sass import paths.

with Bower

• bower install neat-omega
• add @import neat-omega after your @import neat statement in your scss.
• add bower_components/neat-omega/core to your sass import paths.

with Bundler

• add gem "neat-omega" to Gemfile
• add @import neat-omega after your @import neat statement in your scss.

Documentation

alpha

@include alpha($selector: self, $grid: $neat-grid)

• Clears the float on the specified selector. Generally this is the first item in a new row.

example SCSS

.element:nth-child(3n+1) {
  @include alpha;
}

example CSS

.element:nth-child(3n+1) {
  clear: left;
}

example SCSS

.last-element {
  @include alpha('&:last-child');
}

example CSS

.last-element:last-child {
  clear: left;
}

example SCSS

@include alpha('.custom:nth-child(3n+2)');

example CSS

.custom:nth-child(3n+2) {
  clear: left;
}

nth-alpha

@include nth-alpha($selector, $grid: $neat-grid)

• Clears the float on the specified nth-of-type selector. This is mostly for convenience, since you can achieve the same result with alpha

example SCSS

.nth-element {
  @include nth-alpha(4n+1);
}

example CSS

.nth-element:nth-of-type(4n+1) {
  clear: left;
}

omega

@include omega($selector: self, $grid: $neat-grid)

• Adds a margin-right to the specified selector. Generally this is only needed for centered flex layouts.

example SCSS

@include omega('.element:nth-of-type(3n+2)');

example CSS

.element:nth-of-type(3n+2) {
  margin-right: 20px;
}

example SCSS

element {
  @include omega('&:nth-of-type(3n+1)');
}

example CSS

.element:nth-of-type(3n+1) {
  margin-right: 20px;
}

omega-flex

@include omega-flex($selector: null, $grid: $neat-grid)

• Adds a margin right to the specified object, or if auto, to the last child of the grid.

example SCSS

.element {
  @include omega-flex;
}

example CSS

.element {
  margin-right: 20px;
}

example SCSS

@include omega-flex('.element:nth-of-type(3n+2)');

example CSS

@example css - CSS Output
.element:nth-of-type(3n+2) {
  margin-right: 20px;
}

example SCSS

.element {
  @include omega-flex('&:nth-of-type(3n+1)');
}

example CSS

@example css - CSS Output
.element:nth-of-type(3n+1) {
  margin-right: 20px;
}

example SCSS

.element {
  @include omega-flex(auto);
}

example CSS

@example css - CSS Output
.element:last-child {
  margin-right: 20px;
}

nth-omega

@include nth-omega($selector, $grid: $neat-grid)

• Adds a margin right to the specified nth-of-type object, and clears the nth+1 object. Note that composite arguments such as 2n+1 are not supported by this mixin.

example SCSS

.nth-element {
  @include nth-omega(4n);
}

example CSS

.nth-element:nth-child(4n) {
  margin-right: 20px;
}
.nth-element:nth-child(4n+1) {
  clear: left;
}
.nth-element:last-child {
  margin-right: 20px;
}