10 Essential Sass Libraries

By Focusoncode June 29, 2018

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. There are hundreds of Sass libraries, frameworks, and plugins that are available and can save you a lot of time when creating your website. Here are 10 interesting Sass-libraries that you should definitely check out.

1. Bourbon

Bourbon is a Sass library that contains mixin, functions, and add-ons 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.

 

2.Gridlex

Gridlex is a simple CSS grid system for creating modern layouts and submodules. It is easy to use, you just need to wrap your column (.col) elements in a grid container (.grid). It offers responsive designs, based on media-queries and supports nesting grids directly in a column.

3. Sass CSS3 Mixins

Sass CSS3 Mixins provide mixins that work 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 mixing in your CSS class.

 

4. 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 logo, cooling, warming, sepia, and others. You can even create a custom filter by combining several filters available and change the value as you like.

5. Saffron

Saffron is a simple Sass mixing library that offers a fast way to add CSS animations and transitions to your website. It is easy to use, all you need to do is include the mixing in the Sass declaration and set the variable for the effect you want to use. There is a large variety of animation and transitions available- fade in and out, slide in and out, shake, bounce and a lot more.

 

6. mini.css

This is a lightweight and mobile-first CSS framework for creating amazing and responsive websites. It is only 10kb gzipped, and its responsive grid and modern components offer a fast and easy way to craft beautiful designs for all screen sizes.

 

7. Buttons

Button 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. 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.

 

9. Scut  sass-libraries

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.

 

10. 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 mixing gives the flexibility to set the image position in your sprite. In addition to Sass, the CssOwl mixin library is also available for LESS and Stylus.

Share This

Leave a Comment

Your email address will not be published.