Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.
There are myriad of mixin libraries available, we have compiled a list of useful Sass mixin libraries that help developers to avoid repetitive things in CSS such as creating buttons, animations, transition effects, adapting multiple browsers and many more.
So, without further ado lets checkout following 15 Mixin Libraries that could be useful for your Sass development.
1. CSSowl
Cssowl is a mixin and extendable placeholder library with support for LESS, SASS/SCSS and Stylus. It also helps when you want to create sprite elements: the mixin gives flexibility to set the image position in your sprite.
2. Bourbon
Bourbon is a library of pure Sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.
3. Andy.scss
Andy.scss is a collection of free, useful SASS mixins. It includes mixins for things like background gradients, borders, shadows, and more.
4. Bi App Sass
Bi-App-Sass allows you to write your stylesheets once, and have them compiled into 2 different stylesheets one for left-to-right layout, and the other for right-to-left layouts. When using Bi-app-less & Bi-App-Sass, all you have to do is to write your stylesheets once using predefined mixins for those direction related properties, and once you compile your stylesheets, you’ll have two stylesheets for your bi-directional app.
5. Sass CSS3 Mixins
Sass CSS3 Mixins provide mixins that works across different browsers. You’ll find a bunch of best-practice mixins here such as background, border, box, column, font-face, transform, transition, and animation. The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files.
6. Sassmatic
Sassmatic is a photo filter library, using Sass and Compass, which gives your images 14 filter effects including lomo, cooling, warming, sepia, and others. You can even create a custom filter by combining several filters available and change the value as you like.
7. Breakpoint
Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what’s important: making sure your website looks its best.
8. Buttons
Buttons is a CSS library for creating highly customizable, flexible and modern web buttons. It is built with Sass + Compass and has support for square, rounded or circular buttons that can be flat or not and having custom effects (like glow). The sizes, colors, effects and fonts used can all be changed with the help of variables and it can be extended easily.
9. Blueplate
Blueplate is a lightweight, responsive CSS layout engine and SASS mixin library. Using Blueplate is simple and can be done in two ways. You can either include the “sass/blueplate.scss” SASS file in your project and compile accordingly or you can include the “css/blueplate.css” CSS file within your head tag. Doing the latter wont allow you to edit the options but the plugin is comprehensive and includes everything you need to get going.
10. Scut
Scut is a collection of Sass utilities to ease and improve our implementations of common style-code patterns. It provides best-practice code to create web stuff like page layouts and in styling typography. You can cut down repetition when writing code by reusing the code more often.
11. Saffron
Saffron is a collection of Sass mixins and helpers that make adding CSS3 animations and transitions much simpler. Just include a mixin in your Sass declaration, then set any configuration using variables and mixin parameters. With Saffron, you have complete control over how your animations and transitions should behave.
12. Type Settings
A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.
13. Sassline
Sassline lets you set a modular-scale for each of your breakpoints and easily work from these values to size your type. This combined with the baseline grid allows you to have harmonious proportions across all aspects of your website.
14. Ultimate Mixins
Ultimate Mixins, simple and minimalistic library of SASS functions, mixins and basic polyfills to create cross browser CSS-styles.
15. RD Mixins
This is a library of helpful Sass and Compass mixins. These exist to maintain DRY coding principles and leverage the browser for redundant tasks such as calculating widths and margins.
