Use SASS for compiling lightbox.css

.gitignore

@@ -1,2 +1,6 @@
 bower_components
 node_modules
+
+.DS_Store
+Thumbs.db
+desktop.ini

Gruntfile.js

@@ -58,12 +58,49 @@ module.exports = function(grunt) {
       jshint: {
         files: ['src/js/lightbox.js'],
         tasks: ['jshint', 'jscs']
+      },
+      sass: {
+        files: ['src/sass/**/*.sass'],
+        tasks: ['sass']
       }
     },
     cssmin: {
       minify: {
-          src: 'dist/css/lightbox.css',
-          dest: 'dist/css/lightbox.min.css'
+        src: 'dist/css/lightbox.css',
+        dest: 'dist/css/lightbox.min.css'
+      }
+    },
+    sass: {
+      minify: {
+        options: {
+          noCache: true,
+          sourcemap: 'none',
+          style: 'compressed'
+        },
+        files: {
+          'dist/css/lightbox.min.css': ['src/sass/**/*.sass']
+        }
+      },
+      default: {
+        options: {
+          noCache: true,
+          sourcemap: 'none',
+          style: 'expanded'
+        },
+        files: {
+          'dist/css/lightbox.css': ['src/sass/**/*.sass']
+        }
+      }
+    },
+    autoprefixer: {
+      options: {
+        browsers: ['last 2 versions']
+      },
+      dist: {
+        files: {
+          'dist/css/lightbox.css': 'dist/css/lightbox.css',
+          'dist/css/lightbox.min.css': 'dist/css/lightbox.min.css'
+        }
       }
     }
   });
@@ -75,9 +112,12 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-cssmin');
+  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-autoprefixer');
   grunt.loadNpmTasks("grunt-jscs");
 
   grunt.registerTask('default', ['connect', 'watch']);
   grunt.registerTask('test', ['jshint', 'jscs']);
   grunt.registerTask('build', ['jshint', 'jscs', 'copy:dist', 'concat', 'uglify', 'cssmin:minify']);
+  grunt.registerTask('buildsass', ['sass', 'autoprefixer']);
 };

package.json

@@ -28,13 +28,15 @@
   ],
   "devDependencies": {
     "grunt": "^0.4.5",
+    "grunt-autoprefixer": "^3.0.3",
     "grunt-contrib-concat": "^0.5.1",
     "grunt-contrib-connect": "^0.7.1",
     "grunt-contrib-copy": "^0.8.0",
     "grunt-contrib-cssmin": "^0.12.3",
     "grunt-contrib-jshint": "^0.11.2",
     "grunt-contrib-uglify": "~0.4.0",
     "grunt-contrib-watch": "^0.5.3",
+    "grunt-contrib-sass": "~0.8.1",
     "grunt-jscs": "^1.8.0"
   }
 }

src/sass/_base.sass

@@ -0,0 +1,167 @@
+// Preload
+
+body
+
+  &:after
+    display: none
+    content: url(#{$lb-image-url}close.png) url(#{$lb-image-url}loading.gif) url(#{$lb-image-url}prev.png) url(#{$lb-image-url}next.png)
+
+  &.lb-disable-scrolling
+    overflow: hidden
+
+// Lightbox
+
+.lightbox
+  width: 100%
+  position: absolute
+  left: 0
+  z-index: 10000
+  text-align: center
+  line-height: 0
+  font-weight: normal
+
+  &Overlay
+    display: none
+    position: absolute
+    top: 0
+    left: 0
+    z-index: 9999
+    background-color: #000
+    opacity: 0.8
+
+  a img
+    border: none
+
+  .lb-image
+    display: block
+    height: auto
+    max-width: inherit
+    border-radius: 3px
+
+// Container
+
+.lb-outerContainer
+  width: 250px
+  height: 250px
+  position: relative
+  background-color: #fff
+  margin: 0 auto
+  border-radius: 4px
+  *zoom: 1
+
+  &:after
+    @extend %clearfix
+
+.lb-container
+  padding: 4px
+
+  & > .nav
+    left: 0
+
+// Controls
+
+.lb-loader
+  width: 100%
+  height: 25%
+  position: absolute
+  top: 43%
+  left: 0
+  text-align: center
+  line-height: 0
+
+.lb-cancel
+  display: block
+  width: 32px
+  height: 32px
+  margin: 0 auto
+  background: url(#{$lb-image-url}loading.gif) no-repeat
+
+// Navigation
+
+.lb-nav
+  width: 100%
+  height: 100%
+  position: absolute
+  top: 0
+  left: 0
+  z-index: 10
+
+  .lb-prev,
+  .lb-next
+    display: block
+    height: 100%
+    cursor: pointer
+
+  a
+    outline: none
+
+    &:hover
+      opacity: 1
+
+    &.lb-prev
+      width: 34%
+      left: 0
+      float: left
+      background: url(#{$lb-image-url}prev.png) left 48% no-repeat
+      opacity: 0
+      transition: opacity 0.6s
+
+    &.lb-next
+      width: 64%
+      right: 0
+      float: right
+      background: url(#{$lb-image-url}next.png) right 48% no-repeat
+      opacity: 0
+      transition: opacity 0.6s
+
+// Data container
+
+.lb-dataContainer
+  width: 100%
+  margin: 0 auto
+  padding-top: 5px
+  border-bottom-left-radius: 4px
+  border-bottom-right-radius: 4px
+  *zoom: 1
+
+  &:after
+    @extend %clearfix
+
+// Data
+
+.lb-data
+  padding: 0 4px
+  color: #CCC
+
+  .lb-details
+    width: 85%
+    float: left
+    text-align: left
+    line-height: 1.1em
+
+  .lb-caption
+    font-size: 13px
+    font-weight: bold
+    line-height: 1em
+
+  .lb-number
+    display: block
+    clear: left
+    padding-bottom: 1em
+    font-size: 12px
+    color: #999
+
+  .lb-close
+    display: block
+    width: 30px
+    height: 30px
+    float: right
+    background: url(#{$lb-image-url}close.png) top right no-repeat
+    text-align: right
+    outline: none
+    opacity: 0.7
+    transition: opacity 0.2s
+
+    &:hover
+      cursor: pointer
+      opacity: 1

src/sass/_variables.sass

@@ -0,0 +1,10 @@
+// Variables
+
+$lb-image-url: '../images/' !default
+
+// Extends
+
+%clearfix
+  display: table
+  clear: both
+  content: ''

src/sass/lightbox.sass

@@ -0,0 +1,2 @@
+@import "variables"
+@import "base"