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 withalpha
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 thenth+1
object. Note that composite arguments such as2n+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;}