Organize SCSS partials

assets/css/main.scss

@@ -10,14 +10,53 @@
  *
 */
 
-@import "vendor/breakpoint/breakpoint"; // media query mixins
+/*
+   Variables
+   ========================================================================== */
+
 @import "variables";
-@import "mixins";
+
+
+/*
+   Vendor
+   ========================================================================== */
+
+/* Breakpoint - media query mixins */
+@import "vendor/breakpoint/breakpoint";
+@include breakpoint-set("to ems", true);
+
+/* Font Awesome - icon font set */
+@import "vendor/font-awesome/font-awesome";
+
+/* Magnific Popup - responsive lightbox */
+@import "vendor/magnific-popup/magnific-popup"; // Magnific Popup
+
+/* Susy - grid mixins */
+$susy: (
+  columns: 12,
+  gutters: 1/4,
+  math: fluid,
+  output: float,
+  gutter-position: after,
+  container: $large,
+  global-box-sizing: border-box,
+  // debug: (
+  //   image: show,
+  //   color: blue,
+  //   output: overlay,
+  //   toggle: top right,
+  // ),
+);
 @import "vendor/susy/susy";
 
+
+/*
+   Base
+   ========================================================================== */
+
+@import "mixins";
 @import "reset";
 @import "base";
-
 @import "utilities";
 @import "animations";
 @import "tables";
@@ -27,13 +66,14 @@
 @import "navigation";
 @import "footer";
 @import "syntax";
-
 @import "forms";
 
+
+/*
+   Layout specific
+   ========================================================================== */
+
 @import "page";
 @import "archive";
 @import "sidebar";
-
-@import "vendor/font-awesome/font-awesome";
-@import "vendor/magnific-popup/magnific-popup";
 @import "print";