use node-sass for building sass (#2483)

* use node-sass for building sass

Replaced compass for node sass and added autoprefixer for automated vendor prefixes

This removes the ruby dependency

remove compass from package.json

remove gem install from travis config

update contributing guide accordingly

* set outputStyle to expanded

.travis.yml

@@ -12,11 +12,7 @@ addons:
     packages:
       - git
 
-before_install:
-  - npm install -g grunt-cli
-  - gem install bundler
-  - bundle install
-
+before_install: npm install -g grunt-cli
 before_script: grunt build package-npm package-bower
 
 after_success: ./publish-package.sh

Gruntfile.coffee

@@ -53,11 +53,20 @@ This file is generated by `grunt build`, do not edit it by hand.
           'public/chosen.jquery.min.js': ['public/chosen.jquery.js']
           'public/chosen.proto.min.js': ['public/chosen.proto.js']
 
-    compass:
+    sass:
+      options:
+        outputStyle: 'expanded'
       chosen_css:
-        options:
-          bundleExec: true
-          specify: ['sass/chosen.scss']
+        files:
+          'public/chosen.css': 'sass/chosen.scss'
+
+    postcss:
+      options:
+        processors: [
+          require('autoprefixer')(browsers: 'last 2 versions, IE 8')
+        ]
+      dist:
+        src: 'public/chosen.css'
 
     cssmin:
       minified_chosen_css:
@@ -90,7 +99,7 @@ This file is generated by `grunt build`, do not edit it by hand.
   grunt.loadTasks 'tasks'
 
   grunt.registerTask 'default', ['build']
-  grunt.registerTask 'build', ['coffee', 'compass', 'concat', 'uglify', 'cssmin']
+  grunt.registerTask 'build', ['coffee', 'sass', 'concat', 'uglify', 'postcss', 'cssmin', 'package-bower']
   grunt.registerTask 'test',  ['coffee', 'jasmine']
 
 

contributing.md

@@ -180,7 +180,7 @@ license your work under the [MIT License](http://en.wikipedia.org/wiki/MIT_Licen
 
 To install all development dependencies, in the project's root directory, run
 
-    npm install && gem install bundler && bundle install
+    npm install
 
 Once you're configured, building the JavaScript from the command line is easy:
 

package.json

@@ -21,21 +21,21 @@
   "scripts": {
     "test": "grunt test"
   },
-  "dependencies": {
-    "jquery": ">=1.4.4"
-  },
+  "dependencies": {},
   "devDependencies": {
+    "autoprefixer": "^6.1.2",
     "coffee-script": ">= 1.6",
     "grunt": "~0.4.1",
     "grunt-contrib-coffee": "~0.6.4",
-    "grunt-contrib-compass": "~0.5.0",
     "grunt-contrib-concat": "~0.1.3",
     "grunt-contrib-cssmin": "~0.6.1",
     "grunt-contrib-jasmine": "~0.5.1",
     "grunt-contrib-uglify": "~0.2.0",
     "grunt-contrib-watch": "~0.3.1",
     "grunt-dom-munger": "~2.0.1",
     "grunt-gh-pages": "~0.10.0",
+    "grunt-postcss": "^0.7.1",
+    "grunt-sass": "^1.1.0",
     "grunt-zip": "~0.9.2",
     "load-grunt-tasks": "^3.0.0"
   },

sass/chosen.scss

@@ -1,19 +1,15 @@
-@import "compass/css3/box-sizing";
-@import "compass/css3/images";
-@import "compass/css3/user-interface";
-
-$chosen-sprite: image-url('chosen-sprite.png') !default;
-$chosen-sprite-retina: image-url('[email protected]') !default;
+$chosen-sprite: url('chosen-sprite.png') !default;
+$chosen-sprite-retina: url('[email protected]') !default;
 
 /* @group Base */
 .chosen-container {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   font-size: 13px;
-  @include user-select(none);
+  user-select: none;
   * {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
   }
   .chosen-drop {
     position: absolute;
@@ -62,7 +58,7 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
     border: 1px solid #aaa;
     border-radius: 5px;
     background-color: #fff;
-    @include background(linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%));
+    background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
     background-clip: padding-box;
     box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(#000,.1);
     color: #444;
@@ -127,7 +123,7 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
       outline: 0;
       border: 1px solid #aaa;
       background: #fff $chosen-sprite no-repeat 100% -20px;
-      @include background($chosen-sprite no-repeat 100% -20px);
+      background: $chosen-sprite no-repeat 100% -20px;
       font-size: 1em;
       font-family: sans-serif;
       line-height: normal;
@@ -175,7 +171,7 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
     }
     &.highlighted {
       background-color: #3875d7;
-      @include background-image(linear-gradient(#3875d7 20%, #2a62bc 90%));
+      background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
       color: #fff;
     }
     &.no-results {
@@ -210,7 +206,7 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
     height: auto;
     border: 1px solid #aaa;
     background-color: #fff;
-    @include background-image(linear-gradient(#eee 1%, #fff 15%));
+    background-image: linear-gradient(#eee 1%, #fff 15%);
     cursor: text;
   }
   .chosen-choices li {
@@ -243,7 +239,7 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
       max-width: 100%;
       border-radius: 3px;
       background-color: #eeeeee;
-      @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%));
+      background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
       background-size: 100% 19px;
       background-repeat: repeat-x;
       background-clip: padding-box;
@@ -272,7 +268,7 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
       padding-right: 5px;
       border: 1px solid #ccc;
       background-color: #e4e4e4;
-      @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%));
+      background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
       color: #666;
     }
     &.search-choice-focus {
@@ -307,7 +303,7 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
       border-bottom-right-radius: 0;
       -moz-border-radius-bottomleft: 0;
       border-bottom-left-radius: 0;
-      @include background-image(linear-gradient(#eee 20%, #fff 80%));
+      background-image: linear-gradient(#eee 20%, #fff 80%);
       box-shadow: 0 1px 0 #fff inset;
     }
     .chosen-single div {
@@ -396,7 +392,7 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
   .chosen-search input[type="text"] {
     padding: 4px 5px 4px 20px;
     background: #fff $chosen-sprite no-repeat -30px -20px;
-    @include background($chosen-sprite no-repeat -30px -20px);
+    background: $chosen-sprite no-repeat -30px -20px;
     direction: rtl;
   }
   &.chosen-container-single{