11 Mixin Libraries For Sass Designers Should Get

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

1. Bourbon

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.

3. Sassmatic

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.

4. CssOwl

CssOwl provides useful mixins to set the position of an element (relative or absolute) and add content with the pseudo selector ( :after and :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 min-width or max-width of media queries. Since the variable you’ve created has a meaningful name, you can call it easily for use in Sass.

6. Scut

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.

7. Buttons

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.

8. Saffron

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.

11. Andy.scss

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.

iPixel Creative - Singapore web design & web development company

Sunday, January 11, 2015