Sass – Bourbon – library useful mixins

Bourbon is gem library used for css to help developers and designers style their html.

To install the gem make sure ruby and gem is installed. Afterwards type:
@gem install bourbon

Then go to your sass/scss folder and bring up command line for it. and type: @bourbon install
it should create a folder with all your bourbon functionality and in your scss put `import ‘bourbon/bourbon’` at the beginning and you can code away with the help of mixin/functions for accelerated developing.

Bourbon: Useful Mixins
– background: tint(red, 40%); –> Mix with white
– background: shade(blue, 60%); –> mix with black
– .element {
@include position(relative, top right bottom left);
}
– size(20px); outputs width: 20px; height: 20px;

Check these beginners tutorial for using bourbon + neat:
http://blog.teamtreehouse.com/introduction-neat-semantic-sass-grid

and

https://webdesign.tutsplus.com/articles/6-essential-bourbon-neat-mixins–cms-24894

and

If you want to accelerate your SASS development even further:
https://www.sitepoint.com/5-ways-improve-sass-bourbon/

Credit to the authors.

Leave a Reply

Your email address will not be published. Required fields are marked *