Tools & Snippets from the Sass Community

Since we launched Sass break, we’ve received links to helpful Sass tools and snippets from readers. So in this post, we’re giving them a hat tip by sharing their tools and code snippets with everyone!

unique-id() for auto-naming animations

In the post Nested @keyframes Rules, front-end architect and Sass evangelist, Roy Tomeij, shared with us a clever use for the unique-id() function.

Naming things can be difficult. So, instead of spending valuable time pondering what to call an animation, we can let Sass name it with unique-id().

Play with this gist on SassMeister.

Edit: Roy just released an article on simplifying animation keyframes with unique-id().

The nested double ampersand mixin

In the Double Ampersand Mixin post, front-end developer Kaelig shared a gist demonstrating how to use the mixin with nested selectors.

Play with this gist on SassMeister.

Flexible grid system

Front-end developer Doğukan Güven Nomak built a Flexible grid system with Sass! To learn more about it, visit, or check out Doğukan’s CodePen demo:

See the Pen wBzdzj by Doğukan Güven Nomak (@dnomak) on CodePen.

Sass maps for icon fonts

This one wasn’t posted on Sass break, but it’s a neat snippet by Dale Sande that uses a Sass map and an @each loop to generate icon fonts. Here’s an example:

Play with this gist on SassMeister.

Thank you and keep up the great work, Sass community!

comments powered by Disqus