Fresh and Useful Resources for Sass Users

With such a promising title as syntactically awesome style sheet, this powerful and quite stable version of CSS extension language guarantees that your next project will definitely stay ahead and stand out from others; it won’t suffer from inconveniences caused by old browsers or small screen devices, neither would it come into conflict with other versions of CSS and CSS libraries. With a great skilled core team, huge community and 8 years behind it, Sass certainly is a great solution for enhancing your front-end CSS workflow.

Want to suit up your project with some helpful preprocessor elements? Then take a look at our fresh collection of free grids, mixins, UIs and plugins made in Sass.

Grids and Grid Systems

Profound Grid

Profound Grid will equip your project with a powerful, flexible foundation that is well-suited for creating fixed and fluid layouts.

Profound Grid

Gridle

Gridle is a really simple to use grid system that is created via Sass. It includes styles for beautifully displaying your data on iPad, iPhone and other small devices.

Gridle

Frameless grid

Those who are sick and tired of incorporating fluid grids will definitely appreciate this frameless totally responsive grid that adapts your design column by column rather than pixel by pixel.

Frameless Grid

Salsa

Salsa has become a part of Susy,version 2. However, you can still make use of it, if you prefer simpler and feature-less grid systems.

Salsa

A Creative Grid System With Sass and calc()

The team teaches how to create your own Sass-powered grid layout. It is a perfect start for newbies that want to learn the basics or those who need a less sophisticated grid solution.

A Creative Grid System

Table Grid System

Having utilized table as a basis, the developer has skillfully developed a quite simple yet elegant grid system that will definitely find its place in numerous projects.

Table Grid System

Grid by Chris Coleman

This is an optimal combination of columns and clutters that make it a really elegant and well-balanced instrument for creating websites.

Grid by Chris Coleman

Results Grid

Ehren Coker has created a Sass-based grid system that leverages media query, inline blocks and floating elements in order to provide the system with correct behavior across various devices.

Results Grid

Mixins

Glitched Text

The code snippet allows you to imitate a really cool effect that will add some distinctive and a bit scary touch to your project. It can be applied to text and images.

Glitched Text

Flat button Generator

Want to populate your website with vibrant flat style buttons with tiny custom glyphs that can be placed in various positions, when you stumble upon a really graceful and effective solution.

Flat button Generator

Clean Sticky Footer

This sticky bar that is bottom fixed is an ideal match for your parallax-based website. It can be used for unobtrusively showcasing your offers or deals or just displaying a complementary navigation thereby improving overall user experience.

Clean Sticky Footer

Ghost Buttons

These kind of graphics are a really huge trend among website designers nowadays, so that providing yourself with a Sass Mixin that lets you quickly add subtle line style buttons with a sleek hover effect is a must-have.

Ghost Buttons

Mixin for Targeting iPad

The code snippet lets you target iPad devices. This is a really helpful solution for those who are up to building fully responsive websites.

Mixin for Targeting iPad

Radial-Gradient SASS Mixin

Although gradients are not so popular anymore, this basic effect is still used in some modern websites that leverage overlay semi-transparent gradient screens for giving their landing pages an outstanding and vibrant look. This piece of code lets you follow this stream.

Radial-Gradient

Font-Size Mixin

Font-size Mixin is going to treat your typeface well by generating a proper font-size CSS declaration including fallbacks for older browsers.

Font-Size Mixin

Long Shadow Generator

Icons with a long shadow look really cool and modern. How about a text with the same effect? This generator helps to add sleek shadows to any text you need. It can be used for prettifying logotypes, taglines and slogans.

Long Shadow Generator

UIs

Buttons

The set includes flat style buttons with a distinctive contour that are presented with a solid and hollow appearance and in rectangular and circular shapes.

Buttons

Switches

Much like in the previous example, the snippet lets you create simple flat style switches that you can paint in various colors.

Switches

Map Magic, Buttons

The author gets the most out of Sass Maps in order to create these flawless buttons. You will find pre-defined twitter button, github button, dribbble button and even a huge eye-catching call-to-action button with a gradient backdrop. The technique can be used for creating other graphical elements too.

Map Magic

Responsive Menu

The developer shares a really helpful snippet that lets you add to your website a trendy compact slide out navigation that has a responsive behavior.

Menu

Search Engine UI

The UI includes a search line, dynamically generating box for neatly-formatted search results and a small horizontal navigation.

Search Engine UI

Plugins

Marv

Marv is a comprehensive set of instruments that are aimed at improving WordPress theme development by utilizing not only Sass but also LESS and CoffeeScript.

Marv

Gravity Forms Sass

If you use Gravity Forms in your WordPress-powered website then this plugin will make its work more productively, efficiently and quicker through replacing excessive style sheet with a neat and compactly-organized file composed of Sass and minimal selectors.

Gravity Forms Sass

Mojolicious Plugin Assetpack

Mojolicious plugin assetpack allows you to minimize your project files by skillfully converting and compressing Sass files. However the plugin does not work properly if “minify” is enabled.

Mojolicious

Easy Sprites

The plugin works properly with Sass and Compass. It is responsible for multiple sprites generation, giving you an opportunity to effectively work with retina displays.

Easy Sprites

Hapi Sass

The plugin is aimed to compile and serve Sass style sheets by getting the most out of node-sass.

Hapi-Sass

WP SCSS

This WordPress-oriented plugin compiles Sass files into CSS files and enqueues them.

WP SCSS

Conclusion

The amount of Sass supporters are increasing day by day, irrefutable proof of this is that the web has been regularly replenished with various code snippets, GUIs, mixins, plugins and grid systems that are based on it. Do you know any other helpful Sass components and tools? Share them with us.