« HE:labs

Mixin libraries FTW

Postado por Matheus Costa em 08/05/2015

Get the most out of preprocessors

Mixin Libraries FTW

Goodbye CSS

The most common preprocessors are Less, Stylus and Sass. They have some particularities like syntax and dependencies, but in the end, they produce the same output.
Today preprocessors are unavoidable. If you are in a huge project you really need to use it. The advantages are:

  • Nested syntax
  • Define variables
  • Mixins
  • Inheritance
  • Functions
  • Reduce Writing
  • Performance
  • Crossbrowser

As we can see, the goal is to spend less time and increase the productivity. What if I say we can boost it even more? Yes, we can.
Mixin libraries are way better to get stuff ready to be used and we don't have to create a lot of useful mixins.
So let's take a look in some of then.


Nib is the best (and only) mixin library for Stylus at the moment. It has some awesome features and is pretty easy to use.
One amazing mixin of this library is the Reset.
Putting this simple line:

1 global-reset()

the output will be like:

 1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 2   margin: 0;
 3   padding: 0;
 4   border: 0;
 5   outline: 0;
 6   font-weight: inherit;
 7   font-style: inherit;
 8   font-family: inherit;
 9   font-size: 100%;
10   vertical-align: baseline;
11 }
12 body {
13   line-height: 1;
14   color: #000;
15   background: #fff;
16 }
17 ol,
18 ul {
19   list-style: none;
20 }
21 table {
22   border-collapse: separate;
23   border-spacing: 0;
24   vertical-align: middle;
25 }
26 caption, th, td {
27   text-align: left;
28   font-weight: normal;
29   vertical-align: middle;
30 }
31 a img {
32   border: none;
33 }

Awesome huh?


Compass is one option for Sass. It's very robust and perfect to work with sprites and images. In other hand, is too heavy compared to the others.
Speaking about Sprites, that's the exactly mixin we gonna see here. To start with it, let's create a folder called social with 5 icons 32px square each.

  • images/social/facebook.png
  • images/social/twitter.png
  • images/social/instagram.png
  • images/social/linkedin.png
  • images/social/pinterest.png

Now just add this on the code:

1 @import "compass/utilities/sprites";
2 @import "social/*.png";
3 @include all-social-sprites;

And the output is something like:

 1 .social-sprite,
 2 .social-facebook,
 3 .social-instagram,
 4 .social-linkedin,
 5 .social-pinterest,
 6 .social-twitter { background: url('/images/social-s34fe0604ab.png') no-repeat; }
 8 .social-facebook   { background-position: 0 0; }
 9 .social-instagram  { background-position: 0 -32px; }
10 .social-linkedin   { background-position: 0 -64px; }
11 .social-pinterest  { background-position: 0 -96px; }
12 .social-twitter    { background-position: 0 -128px; }

Badass! Right?!


Bourbon is another option for Sass and it's also our choice for the projects in the company. It's simpler and lighter than Compass, but it gets better when combined with Neat, Bitters and Reffils.
A mixin that I use in every project is the font-face.

1 @include font-face("museo", "museo/museo", $asset-pipeline: true);

This magic line do all the work and if you are using rails, the $asset-pipeline set the fonts path as default.

1 @font-face {
2   font-family: "museo";
3   font-style: normal;
4   font-weight: normal;
5   src: url("assets/museo/museo.eot?#iefix") format("embedded-opentype"),
6        url("assets/museo/museo.woff") format("woff"),
7        url("assets/museo/museo.ttf") format("truetype"),
8        url("assets/museo/museo.svg#typicons") format("svg");
9 }

Less Hat

Less Hat is perfect for Less. (since it has a lot of frameworks and libraries) but Less Hat can do much more. You can find out the full comparison on the website.
My favorite mixin in this library is size.

1 div {
2   .size(50, 100);
3 }

It just set a width and height in a simple line.

1 div {
2  width: 50px;
3  height: 100px;
4 }

I know, it's to simple. But that's cool! Less is more.

Try it

If you haven't work with none of this libraries before you can test for free on Codepen.
You just need to create a pen and click on the gear besides CSS to choose one of then. (See screenshot below).


That's it guys, hope you enjoy it.


Sabia que nosso blog agora está no Medium? Confira Aqui!