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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Switches
Much like in the previous example, the snippet lets you create simple flat style switches that you can paint in various colors.
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.
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.
Search Engine UI
The UI includes a search line, dynamically generating box for neatly-formatted search results and a small horizontal navigation.
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.
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.
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.
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.
Hapi Sass
The plugin is aimed to compile and serve Sass style sheets by getting the most out of node-sass.
WP SCSS
This WordPress-oriented plugin compiles Sass files into CSS files and enqueues them.
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.