{"id":23090,"date":"2015-01-08T23:01:42","date_gmt":"2015-01-08T15:01:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23090"},"modified":"2019-01-09T19:38:27","modified_gmt":"2019-01-09T11:38:27","slug":"mixin-library-for-sass","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/mixin-library-for-sass\/","title":{"rendered":"9 Mixin Libraries For Sass Designers Should Get"},"content":{"rendered":"

If you use Sass in your development workflow<\/a>, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS<\/strong>, that\u2019s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site.<\/p>\n

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 <\/strong>to creating buttons, animations and transition effects<\/strong>, find this and more in the following 11 mixin libraries you should get for your Sass development.<\/p>\n

Recommended Reading: <\/strong>A Simple And Easy Guide To Understand Sass<\/a><\/p>\n

1. Bourbon<\/h2>\n

Bourbon<\/a> 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.<\/p>\n

Check out the complete documentation<\/a> to use each available mixin and function.<\/p>\n

\"Bourbon\"<\/figure>\n

2. Sass CSS3 Mixins<\/h2>\n

Sass CSS3 Mixins provide mixins that works across different browsers. You\u2019ll find a bunch of best-practice mixins here such as background, border, box, column, font-face, transform, transition, and animation. It\u2019s enough for your styling needs. To use, import the css3-mixins.scss<\/code> and call the mixin in your CSS class.<\/p>\n

Download this mixin here<\/a>.<\/p>\n

\"css3<\/figure>\n

3. CssOwl<\/h2>\n

CssOwl<\/a> provides useful mixins to set the position of an element (relative or absolute) and add content with the pseudo selector ( :after<\/code> and :before<\/code>). 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.<\/p>\n

\"cssowl\"<\/figure>\n

4. Breakpoint Sass<\/h2>\n

Breakpoint<\/a> 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<\/code> or max-width<\/code> of media queries. Since the variable you\u2019ve created has a meaningful name, you can call it easily for use in Sass.<\/p>\n

\"breakpoint\"<\/figure>\n

5. Scut<\/h2>\n

Scut<\/a> 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.<\/p>\n

\"scut\"<\/span><\/p>\n

6. Saffron<\/h2>\n

With Saffron<\/a>, 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<\/a> or Gem, or just download it manually from Github.<\/p>\n

\"saffron\"<\/figure>\n

7. Type Settings<\/h2>\n

TypeSettings<\/a> 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<\/a>, or clone the repo. For more details, check out its page<\/a>.<\/p>\n

Read Also: <\/strong>A Look Into CSS Units \u2013 Pixels, EM, Percentage<\/a><\/p>\n

\"typesettings\"<\/figure>\n

8. Sass Line<\/h2>\n

Sass Line<\/a> 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<\/a> 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.<\/p>\n

Go here<\/a> to get more details on how to use it.<\/p>\n

\"sassline\"<\/figure>\n

9. Andy.scss<\/h2>\n

Andy.scss<\/a> is a collection of useful Sass mixins, built to help you develop a website\u2019s 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<\/a>.<\/p>\n

\"sass\"<\/figure>\n

More Posts on Sass:<\/h2>\n