From 8421ac43e9994b0f086c82630f05f2ee7be11d1f Mon Sep 17 00:00:00 2001
From: Geoff Kimball <geoff@zurb.com>
Date: Fri, 5 Sep 2014 14:25:50 -0700
Subject: [PATCH] Switch to Ruby sass, update Gemfile to Sass 3.4 and Compass
 1.0, fix errors in docs CSS

---
 Gemfile                                    |  3 ++-
 Gemfile.lock                               | 27 ++++++++++++++++------
 Gruntfile.js                               |  7 +++---
 doc/assets/scss/docs.scss                  |  6 ++---
 package.json                               |  2 +-
 scss/foundation/_functions.scss            |  2 +-
 scss/foundation/components/_offcanvas.scss |  2 +-
 7 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/Gemfile b/Gemfile
index f32f00d38b..820ed0214f 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,3 +1,4 @@
 source "https://rubygems.org"
 
-gem "compass", "0.12.2"
\ No newline at end of file
+gem "sass", "~> 3.4.0"
+gem "compass", "~> 1.0.0"
\ No newline at end of file
diff --git a/Gemfile.lock b/Gemfile.lock
index 7f07c6bc70..665382a254 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,16 +1,29 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    chunky_png (1.3.0)
-    compass (0.12.2)
+    chunky_png (1.3.1)
+    compass (1.0.1)
       chunky_png (~> 1.2)
-      fssm (>= 0.2.7)
-      sass (~> 3.1)
-    fssm (0.2.10)
-    sass (3.2.14)
+      compass-core (~> 1.0.1)
+      compass-import-once (~> 1.0.5)
+      rb-fsevent (>= 0.9.3)
+      rb-inotify (>= 0.9)
+      sass (>= 3.3.13, < 3.5)
+    compass-core (1.0.1)
+      multi_json (~> 1.0)
+      sass (>= 3.3.0, < 3.5)
+    compass-import-once (1.0.5)
+      sass (>= 3.2, < 3.5)
+    ffi (1.9.3)
+    multi_json (1.10.1)
+    rb-fsevent (0.9.4)
+    rb-inotify (0.9.5)
+      ffi (>= 0.5.0)
+    sass (3.4.3)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  compass (= 0.12.2)
+  compass (~> 1.0.0)
+  sass (~> 3.4.0)
diff --git a/Gruntfile.js b/Gruntfile.js
index 9ac873ddd9..2e01d38bb7 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -51,8 +51,9 @@ module.exports = function(grunt) {
     sass: {
       dist: {
         options: {
-          includePaths: ['scss'],
-          sourceMap: true
+          loadPath: [__dirname + '/scss'],
+          sourcemap: 'auto',
+          bundleExec: true
         },
         files: {
           'dist/assets/css/foundation.css': '<%= foundation.scss %>',
@@ -232,10 +233,10 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-sass');
   grunt.loadNpmTasks('grunt-karma');
   grunt.loadNpmTasks('grunt-newer');
   grunt.loadNpmTasks('grunt-rsync');
-  grunt.loadNpmTasks('grunt-sass');
   grunt.loadNpmTasks('grunt-contrib-jst');
   grunt.loadNpmTasks('grunt-string-replace');
 
diff --git a/doc/assets/scss/docs.scss b/doc/assets/scss/docs.scss
index a71def6bee..2ce8a85787 100644
--- a/doc/assets/scss/docs.scss
+++ b/doc/assets/scss/docs.scss
@@ -4,7 +4,7 @@
 
 //Foundation Libraries
 @import 
-  "scss/foundation/settings",
+  "foundation/settings",
   "foundation";
 
 //Marketing Site Common Library
@@ -274,7 +274,7 @@ footer { margin-top: 45px; }
     margin-bottom: $paragraph-margin-bottom;
     text-rendering: $paragraph-text-rendering;
 
-    &.lead { @extend %lead; }
+    &.lead { @include lead; }
 
     & aside {
       font-size: $paragraph-aside-font-size;
@@ -549,7 +549,7 @@ $custom-active-bg:darken($custom-link-color, 5%);
 // .docs-wrap { margin-top: 30px; }
 .docs-wrap .inner-wrap { background: #efefef; }
 .docs-wrap .main-section { padding: 0 20px 0 20px; }
-.main-section { @extend %kill-flicker; }
+.main-section { @include kill-flicker; }
 .doc-oc-list { background: $off-canvas-bg; }
 
 // Make sure topbar dropdowns are above tab bar.
diff --git a/package.json b/package.json
index dce7f79046..cc2597b710 100644
--- a/package.json
+++ b/package.json
@@ -13,11 +13,11 @@
     "grunt-contrib-jst": "~0.6.0",
     "grunt-contrib-uglify": "~0.4.0",
     "grunt-contrib-watch": "~0.6.1",
+    "grunt-contrib-sass": "~0.8.1",
     "grunt-string-replace": "~0.2.7",
     "grunt-karma": "~0.6.2",
     "grunt-newer": "~0.7.0",
     "grunt-rsync": "~0.5.0",
-    "grunt-sass": "~0.13.0",
     "handlebars-helper-rel": "~0.1.2",
     "handlebars-helper-slugify": "~0.2.0",
     "highlight.js": "~7.3.0",
diff --git a/scss/foundation/_functions.scss b/scss/foundation/_functions.scss
index 12d31db522..c719360817 100644
--- a/scss/foundation/_functions.scss
+++ b/scss/foundation/_functions.scss
@@ -10,7 +10,7 @@ $rem-base: 16px !default;
 $modules: () !default;
 @mixin exports($name) {
   @if(not index($modules, $name)) {
-    $modules: append($modules, $name);
+    $modules: append($modules, $name) !global;
     @content;
   }
 }
diff --git a/scss/foundation/components/_offcanvas.scss b/scss/foundation/components/_offcanvas.scss
index e8a51c4efc..068d94a42d 100644
--- a/scss/foundation/components/_offcanvas.scss
+++ b/scss/foundation/components/_offcanvas.scss
@@ -29,7 +29,7 @@ $tabbar-header-margin: 0 !default;
 // Off Canvas Menu Variables
 $off-canvas-width: rem-calc(250) !default;
 $off-canvas-bg: $oil !default;
-$off-canvas-bg-hover: background: scale-color($tabbar-bg, $lightness: -30%) !default;
+$off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%) !default;
 
 // Off Canvas Menu List Variables
 $off-canvas-label-padding: 0.3rem rem-calc(15) !default;