Things in CSS are sometimes bit tedious to write, especially when it’s comes to CSS3 and those vendor prefixes that exist. But with a mixin it’s lets you make groups of CSS declarations that you want to re-use throughout your site and you can even pass in values to make your mixin more flexible than ever. So for example a good use of a mixin are for vendor prefixes.
You will see that there are countless of mixin libraries available so for this post I have complied a list of useful Sass mixin libraries that are available to help developers to avoid the repetitive things that we do through CSS such as animations, transition effects, adapting browsers and many more.
1. Andy.scss
Andy is meant to be an open-source repository of SASS mixins, so if something seems wrong or if you wish to add your own mixins, please feel free to fork it on Github.
2. Buttons
Buttons is a CSS library for creating highly customisable, flexible and modern web buttons. It is built with Sass & Compass, it has support for square, rounded or circular buttons that can be flat or not and having custom effects (like glow). The sizes, colours, effects & fonts used can all be changed with the help of variables and it can be extended easily.
3. Blueplate
Blueplate is a lightweight, responsive CSS layout engine and SASS mixin library. Blueplate is simple & can be done in two ways. You can either include the “sass/blueplate.scss” SASS file in your project & 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.
4. 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.
5. Typesettings
Typesettings is a Sass and Stylus Toolkit for Setting Type
6. Scut
Scut is a collection of Sass utilities to ease & improve the implementations of common style-code patterns. It provides best-practice code to create web stuff like page layouts and in styling typography and you can cut down repetition when writing code by reusing the code more often.
7. Sassmatic
Sassmatic is a photo filter library, using Sass and Compass, it’s gives your images 14 filter effects including lomo, warming, sepia, and others. You can even create a custom filter by combining several filters available and change the value as you like.
8. Breakpoint
Breakpoint makes writing media queries in Sass super simple, you 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.
9. 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.
10. Bourbon
Bourbon is a library full of pure Sass mixins that are designed to be simple and easy to use, you will love it as it’s comes with no required configuration. 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.
11. 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.
12. 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.