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!