Sass Web设计人员的10个实用 Mixin 库

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

Sass CSS3 Mixins

You will find mixins in this library that will work across various different browsers. You will also find best practice mixins such as box, column, font-face, border, background, transition, and animation. As far as development goes, they should be just fine for your average development process.

Sassmatic

If you are looking to put different filters on your image with Sass, this is the library you should definitely visit. As apparent, it is an image filter gallery which employs the use of Sass and Compass and provides you with 14 different filters to create desired effects on your images. It includes warming, sepia, lomo, and a lot more for you to try out and have fun with. You can also create custom filters. You can manage that by combining several different filters that are already offered in the library.

CssOwl

This particular library will provide you with mixins that will help you position an element on your website. You will also be able to add content with the pseudo selector. This particular mixin library is also available for LESS and Stylus.

Breakpoint

Media queries are not all that simple to create, however, with the help of these mixins, you should be able to create them easily. You can create variables and give them a value defining the minimum or maximum width of a media query.

Scut

This particular library contains placeholders, functions, variables and reusable Sass mixins which will help you implement common style-code patterns. You will also find best practice code in order to create page layouts and stylized typography.

Buttons

If you are looking to create buttons easily and efficiently, you should definitely browse this library. You will get predefined button styles including rounded, 3D, Border, Circle, Pill, Glow, Flat and DropDown. All you will need to do is include button.css into your HTML and voila!

Saffron

You can use this library of mixins to add CSS3 animations and transitions with a lot of ease. There is a host of animations and transitions for you to use and try, which include slide in and out, fade in and out, rise in and out and even several effects such as teeter, shake and bounce etc. Include the mixin you desire in the Sass declaration and you are all set.

TypeSettings

This is yet another toolkit for Sass. It will allow you to set font size in a modular scale using em, vertical rhythm and ration based headlines. You can install this directly in your browser.

Sass Line

This is a Sass mixin that will help you with better typography. It will use rems unit on your font. That allows you to work your fonts in from the baseline grid proportionally. This particular mixin uses vertical rhythm based on the baseline grid and will let you set a modular scale for each and every one of your breakpoints to get good proportions across the entire website.

Andy.scss

Finally, we have Andy.Scss, which is a very useful collection of Sass mixins built entirely to help you develop the look of your website with considerable ease all the while keeping it light. There are many Sass mixins available all the way from backgrounds right up to animations. Try it out and let us know what you think.