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 flexible.gs, 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:
Thank you and keep up the great work, Sass community!
Tweet this article