If you use Sass in your development workflow, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site.
There are many mixins are made by developers, to help you when working with Sass in your development. Most cover things that often repetitive in CSS. From adapting across multiple browsers to creating buttons, animations and transition effects, find this and more in the following 11 mixin libraries you should get for your Sass development.
Recommended Reading: A Simple And Easy Guide To Understand Sass
Bourbon is a Sass library that contains mixin, functions, and addons that let you simplify the creation of stylesheets for cross-browser use. For me, this is the most marvelous Sass mixin. It contains almost everything you need to style your website while keeping your stylesheet lightweight.
Check out the complete documentation to use each available mixin and function.
2. 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. It’s enough for your styling needs. To use, import the
css3-mixins.scss and call the mixin in your CSS class.
Download this mixin here.
Want to filter your image with stunning effect in Sass? Sassmatic may be what you need. It 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.
CssOwl provides useful mixins to set the position of an element (relative or absolute) and add content with the pseudo selector (
:before). It also helps when you want to create sprite elements: the mixin gives flexibility to set the image position in your sprite. In addition to Sass, the CssOwl mixin library is also available for LESS and Stylus.
5. Breakpoint Sass
Breakpoint helps you make media queries through Sass a simple manner. With Breakpoint, you can create variables and give it a value that define the
max-width of media queries. Since the variable you’ve created has a meaningful name, you can call it easily for use in Sass.
Scut contains a set of reusable Sass mixins, placeholders, functions, and variables that help you easily implement 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. Thus, helping you get more organized in the process.
Buttons is a library that helps you build buttons in beautiful styles. You get predefined button styles such as Flat, Glow, Rounded, 3D, Border, Pill, Circle, and dropdown. For quick use just include the button.css into your HTML. But if you want to customize your own button, follow this tutorial.
Read Also: 40 CSS3 Button Tutorials For Designers
With Saffron, you can add CSS3 animations and transitions with ease. There are a dozen animations and transitions available, including fade in/out, slide in/out, rise in/out as well as miscellaneous effects like shake, teeter, bounce, and others. To use Saffron just include the mixin in the Sass declaration, and call the effect name inside your CSS class. You can get Saffron by installing it using Bower or Gem, or just download it manually from Github.
9. Type Settings
TypeSettings is a type of toolkit for Sass. It will set font-size in modular scale using em (instead of rems or pixels), vertical rhythm, and responsive ratio based headlines. You can install this one with Bower as well, download the release, or clone the repo. For more details, check out its page.
10. Sass Line
Sass Line is a Sass mixin that helps you make better typography. It uses rems unit on your font so that you can work it in proportionally from the baseline grid. Sass Line uses a precise vertical rhythm based on the baseline grid, and lets you set a modular-scale for each of your breakpoints to get good proportions across all aspects of your website.
Go here to get more details on how to use it.
Andy.scss is a collection of useful Sass mixins, built to help you develop a website’s look with ease while keeping it light. There are dozens of Sass mixins available, from backgrounds to animations. Almost all common-used CSS properties are covered here. Get it at Github.