Use scss for stylesheet.

We can build the scss source to .css and .min.css files with the
`grunt build` command.

Gruntfile.js

@@ -1,6 +1,7 @@
 'use strict';
 
 module.exports = function (grunt) {
+  require('load-grunt-tasks')(grunt);
 
   // Project configuration.
   grunt.initConfig({
@@ -38,15 +39,6 @@ module.exports = function (grunt) {
         src: 'src/perfect-scrollbar.js'
       }
     },
-    csslint: {
-      strict: {
-        options: {
-          csslintrc: '.csslintrc',
-          'import': 2
-        },
-        src: ['src/perfect-scrollbar.css']
-      }
-    },
     cssmin: {
       options: {
         banner: '<%= banner %>'
@@ -67,17 +59,16 @@ module.exports = function (grunt) {
         createTag: false,
         push: false
       }
+    },
+    sass: {
+      dist: {
+        files: {
+          'src/perfect-scrollbar.css': 'src/perfect-scrollbar.scss'
+        }
+      }
     }
   });
 
-  // These plugins provide necessary tasks.
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-contrib-jshint');
-  grunt.loadNpmTasks('grunt-contrib-clean');
-  grunt.loadNpmTasks('grunt-contrib-csslint');
-  grunt.loadNpmTasks('grunt-contrib-cssmin');
-  grunt.loadNpmTasks('grunt-bump');
-
   grunt.registerTask('default', 'List commands', function () {
     grunt.log.writeln("");
 
@@ -85,12 +76,11 @@ module.exports = function (grunt) {
     grunt.log.writeln("Run 'grunt build' to minify the source files");
   });
 
-  grunt.registerTask('lint', ['jshint', 'csslint']);
+  grunt.registerTask('lint', ['jshint']);
-  grunt.registerTask('build', ['clean', 'uglify', 'cssmin']);
+  grunt.registerTask('build', ['clean', 'uglify', 'sass', 'cssmin']);
   grunt.registerTask('travis', ['lint']);
   grunt.registerTask('release', 'Release a new version', function (arg) {
     var bumpType = arg ? ':' + arg : '';
     grunt.task.run(['lint', 'bump' + bumpType, 'build']);
   });
-
 };

min/perfect-scrollbar.min.css

@@ -2,4 +2,4 @@
 * http://noraesae.github.com/perfect-scrollbar/
 * Copyright (c) 2014 Hyunje Alex Jun; Licensed MIT */
 
-.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;bottom:3px;height:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container.ps-active-x>.ps-scrollbar-x-rail{display:block}.ps-container:hover>.ps-scrollbar-x-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-x-rail.in-scrolling{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-y-rail{display:block;position:absolute;right:3px;width:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block}.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;bottom:0;height:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.ps-container>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;right:0;width:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.ps-container>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999}
+.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;bottom:3px;height:8px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;bottom:0;height:8px}.ps-container>.ps-scrollbar-x-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;right:3px;width:8px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;right:0;width:8px}.ps-container>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6;-ms-filter:"alpha(Opacity=60)";filter:alpha(opacity=60)}.ps-container:hover>.ps-scrollbar-x-rail.in-scrolling,.ps-container:hover>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999}

package.json

@@ -3,10 +3,12 @@
   "version": "0.5.6",
   "description": "Tiny but perfect jquery scrollbar plugin.",
   "author": "Hyunje Alex Jun <me@noraesae.net>",
-  "contributors": [{
+  "contributors": [
+    {
       "name": "Hyunje Alex Jun",
       "email": "me@noraesae.net"
-  }],
+    }
+  ],
   "main": "src/perfect-scrollbar.js",
   "repository": {
     "type": "git",
@@ -30,7 +32,9 @@
     "grunt-contrib-csslint": "~0.1.2",
     "grunt-contrib-cssmin": "~0.6.1",
     "grunt-contrib-jshint": "~0.1.1",
-    "grunt-contrib-uglify": "~0.1.1"
+    "grunt-contrib-uglify": "~0.1.1",
+    "grunt-sass": "^0.16.1",
+    "load-grunt-tasks": "^1.0.0"
   },
   "scripts": {
     "test": "grunt travis --verbose"

src/perfect-scrollbar.css

@@ -1,109 +1,101 @@
+.ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail {
+  display: block; }
 .ps-container > .ps-scrollbar-x-rail {
   display: none;
-    position: absolute; /* please don't change 'position' */
+  position: absolute;
-    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
+  /* please don't change 'position' */
-    height: 8px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
   border-radius: 4px;
   opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
-    -o-transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
-    -webkit-transition: background-color .2s linear, opacity .2s linear;
+  -moz-transition: background-color 0.2s linear, opacity 0.2s linear;
-    -moz-transition: background-color .2s linear, opacity .2s linear;
+  -o-transition: background-color 0.2s linear, opacity 0.2s linear;
-    transition: background-color .2s linear, opacity .2s linear;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
-}
+  bottom: 3px;
-
+  /* there must be 'bottom' for ps-scrollbar-x-rail */
-.ps-container.ps-active-x>.ps-scrollbar-x-rail {
+  height: 8px; }
-    display: block;
+  .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
-}
+    position: absolute;
-
+    /* please don't change 'position' */
-.ps-container:hover>.ps-scrollbar-x-rail {
+    background-color: #aaa;
-    opacity: 0.6;
+    -webkit-border-radius: 4px;
-    filter: alpha(opacity=60);
+    -moz-border-radius: 4px;
-}
+    -ms-border-radius: 4px;
-
+    border-radius: 4px;
-.ps-container>.ps-scrollbar-x-rail:hover {
+    -webkit-transition: background-color 0.2s linear;
-    background-color: #eee;
+    -moz-transition: background-color 0.2s linear;
-    opacity: 0.9;
+    -o-transition: background-color 0.2s linear;
-    filter: alpha(opacity=90);
+    transition: background-color 0.2s linear;
-}
+    bottom: 0;
-
+    /* there must be 'bottom' for ps-scrollbar-x */
+    height: 8px; }
   .ps-container > .ps-scrollbar-x-rail.in-scrolling {
     background-color: #eee;
     opacity: 0.9;
-    filter: alpha(opacity=90);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-}
+    filter: alpha(opacity=90); }
-
 .ps-container > .ps-scrollbar-y-rail {
-    display: block;
+  display: none;
-    position: absolute; /* please don't change 'position' */
+  position: absolute;
-    right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
+  /* please don't change 'position' */
-    width: 8px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
   border-radius: 4px;
   opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
-    -o-transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
-    -webkit-transition: background-color .2s linear, opacity .2s linear;
+  -moz-transition: background-color 0.2s linear, opacity 0.2s linear;
-    -moz-transition: background-color .2s linear, opacity .2s linear;
+  -o-transition: background-color 0.2s linear, opacity 0.2s linear;
-    transition: background-color .2s linear, opacity .2s linear;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
-}
+  right: 3px;
-
+  /* there must be 'right' for ps-scrollbar-y-rail */
-.ps-container.ps-active-y>.ps-scrollbar-y-rail {
+  width: 8px; }
-    display: block;
+  .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
-}
+    position: absolute;
-
+    /* please don't change 'position' */
-.ps-container:hover>.ps-scrollbar-y-rail {
+    background-color: #aaa;
-    opacity: 0.6;
+    -webkit-border-radius: 4px;
-    filter: alpha(opacity=60);
+    -moz-border-radius: 4px;
-}
+    -ms-border-radius: 4px;
-
+    border-radius: 4px;
-.ps-container>.ps-scrollbar-y-rail:hover {
+    -webkit-transition: background-color 0.2s linear;
-    background-color: #eee;
+    -moz-transition: background-color 0.2s linear;
-    opacity: 0.9;
+    -o-transition: background-color 0.2s linear;
-    filter: alpha(opacity=90);
+    transition: background-color 0.2s linear;
-}
+    right: 0;
-
+    /* there must be 'right' for ps-scrollbar-y */
+    width: 8px; }
   .ps-container > .ps-scrollbar-y-rail.in-scrolling {
     background-color: #eee;
     opacity: 0.9;
-    filter: alpha(opacity=90);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-}
+    filter: alpha(opacity=90); }
-
+.ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail {
-.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x {
+  opacity: 0.6;
-    position: absolute; /* please don't change 'position' */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-    bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
+  filter: alpha(opacity=60); }
-    height: 8px;
+  .ps-container:hover > .ps-scrollbar-x-rail.in-scrolling, .ps-container:hover > .ps-scrollbar-y-rail.in-scrolling {
-    background-color: #aaa;
+    background-color: #eee;
-    -webkit-border-radius: 4px;
+    opacity: 0.9;
-    -moz-border-radius: 4px;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-    border-radius: 4px;
+    filter: alpha(opacity=90); }
-    -o-transition: background-color .2s linear;
+.ps-container:hover > .ps-scrollbar-x-rail:hover {
-    -webkit-transition: background-color.2s linear;
+  background-color: #eee;
-    -moz-transition: background-color .2s linear;
+  opacity: 0.9;
-    transition: background-color .2s linear;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-}
+  filter: alpha(opacity=90); }
-
+  .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
-.ps-container>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x {
+    background-color: #999; }
-    background-color: #999;
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
-}
+  background-color: #eee;
-
+  opacity: 0.9;
-.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-    position: absolute; /* please don't change 'position' */
+  filter: alpha(opacity=90); }
-    right: 0; /* there must be 'right' for ps-scrollbar-y */
+  .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
-    width: 8px;
+    background-color: #999; }
-    background-color: #aaa;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    -o-transition: background-color .2s linear;
-    -webkit-transition: background-color.2s linear;
-    -moz-transition: background-color .2s linear;
-    transition: background-color .2s linear;
-}
-
-.ps-container>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y {
-    background-color: #999;
-}

src/perfect-scrollbar.scss

@@ -0,0 +1,111 @@
+// Helper mixins
+@mixin opacity($o) {
+  $IEValue: $o * 100;
+  opacity: $o;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
+      filter: alpha(opacity=$IEValue);
+}
+
+@mixin border-radius($r) {
+  -webkit-border-radius: $r;
+     -moz-border-radius: $r;
+      -ms-border-radius: $r;
+          border-radius: $r;
+}
+
+@mixin transition($t...) {
+  -webkit-transition: $t;
+     -moz-transition: $t;
+       -o-transition: $t;
+          transition: $t;
+}
+
+// Scrollbar mixins
+@mixin scrollbar-rail-default {
+  display: none;
+  position: absolute; /* please don't change 'position' */
+  @include border-radius(4px);
+  @include opacity(0);
+  @include transition(background-color .2s linear, opacity .2s linear);
+}
+
+@mixin scrollbar-rail-hover {
+  background-color: #eee;
+  @include opacity(0.9);
+}
+
+@mixin scrollbar-default {
+  position: absolute; /* please don't change 'position' */
+  background-color: #aaa;
+  @include border-radius(4px);
+  @include transition(background-color .2s linear);
+}
+
+@mixin scrollbar-hover {
+  background-color: #999;
+}
+
+@mixin in-scrolling {
+  &.in-scrolling {
+    @include scrollbar-rail-hover;
+  }
+}
+
+.ps-container {
+  &.ps-active-x > .ps-scrollbar-x-rail,
+  &.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+  }
+
+  >.ps-scrollbar-x-rail {
+    @include scrollbar-rail-default;
+    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 8px;
+
+    >.ps-scrollbar-x {
+      @include scrollbar-default;
+      bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
+      height: 8px;
+    }
+
+    @include in-scrolling;
+  }
+
+  >.ps-scrollbar-y-rail {
+    @include scrollbar-rail-default;
+    right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 8px;
+
+    >.ps-scrollbar-y {
+      @include scrollbar-default;
+      right: 0; /* there must be 'right' for ps-scrollbar-y */
+      width: 8px;
+    }
+
+    @include in-scrolling;
+  }
+
+  &:hover {
+    >.ps-scrollbar-x-rail,
+    >.ps-scrollbar-y-rail {
+      @include opacity(0.6);
+      @include in-scrolling;
+    }
+
+    >.ps-scrollbar-x-rail:hover {
+      @include scrollbar-rail-hover;
+
+      >.ps-scrollbar-x {
+        @include scrollbar-hover;
+      }
+    }
+
+    >.ps-scrollbar-y-rail:hover {
+      @include scrollbar-rail-hover;
+
+      >.ps-scrollbar-y {
+        @include scrollbar-hover;
+      }
+    }
+  }
+}