October 23, 2014

Susy Snippets

For work, I've been preparing to share a presentation on Susy 2, a Sass grid implementation system. I'd call it a framework, but that's not accurate. It's a collection of functions and mixins that allow you to create customizable grids via the CSS for your site. It's your grids, when and where you want them.

To make using Susy even easier than it already is, I made a collection of snippets for Sublime Text. You can clone the repo here: git@github.com:kyleshevlin/susy-snippets.git. Be sure to clone these into your User directory under the Browse Packages... folder.

Tab Triggers

Most of these are just the first two or three letters of the mixin name, though there are some exceptions( like layout, global-box-sizing, etc. ). Here is the full list in alphabetical order:

  • al - Alpha Mixin
  • bl - Bleed Mixin
  • blx - Bleed-X Mixin
  • bly - Bleed-Y Mixin
  • br - Break Mixin
  • cof - Container Function
  • co - Container Mixin
  • fi - First Mixin
  • fu - Full Mixin
  • ga - Gallery Mixin
  • gbs - Global Box Sizing Mixin
  • guf - Gutters Function
  • gu - Gutters Mixin
  • is - Isolate Mixin
  • la - Last Mixin
  • lo - Layout Mixin
  • nef - Nested Function
  • ne - Nested Mixin
  • nb - Nobreak Mixin
  • om - Omega Mixin
  • pad - Pad Mixin
  • po - Post Mixin
  • pr - Pre Mixin
  • px - Prefix Mixin
  • pl - Pull Mixin
  • ph - Push Mixin
  • sg - Show Grid Mixin
  • spf - Span Function
  • sp - Span Mixin
  • sq - Squish Mixin
  • sx - Suffix Mixin
  • wl - With Layout Mixin

Hope this helps you and makes using Susy even easier for you!

Web Development


Liked the post? Why not show it?! Stroke Kyle's ego by stroking clicking his beard. You can click up to 50 times if you really liked it.

Spot a typo? Submit a PR with the fix! This entire blog is open sourced at https://github.com/kyleshevlin/blog
Newer Post: Small Gripe: Target="_blank"
Kyle Shevlin's face, which is mostly a beard with eyes
Kyle Shevlin is a front end web developer and software engineer who specializes in JavaScript and React.