Grunt Compass下Spriting以及Retina Sprite

Grunt Compass下Spriting以及Retina Sprite

*.gen安装compass

gem install compass

1.package.json

{
    "name": "gruntSass",
    "description": "gruntSass test",
    "version": "0.0.1",
    "devDependencies": {
        "grunt": "0.4.2",
        "grunt-contrib-sass": "0.6.0",
        "grunt-contrib-compass": "1.0.0",
        "grunt-contrib-cssmin": "0.12.0",
        "grunt-contrib-uglify": "0.8.0",
        "grunt-contrib-watch": "0.6.0"        
    }
}

2.Gruntfile.js

//Compile Sass to CSS using Compass
compass: {
    sprite: {
        options: {
            sassPath: '<%= meta.srcPath %>sass',                    
            cssPath : '<%= meta.descPath %>css',
            imagesPath: '<%= meta.srcPath %>img',                    
            generatedImagesPath: '<%= meta.descPath %>img',
            imagesDir: 'img',                    
            outputStyle: 'expanded',        //nested, expanded, compact, compressed.
            //environment: 'production',    //development or production
            //noLineComments: true,                    
            httpPath: 'http://www.gaoming13.com/assets/',                    
            force: true,                    //Allows Compass to overwrite existing files.                    
            //assetCacheBuster: false,
            //quiet: true,                  //Quiet mode.                   
            sourcemap: true
        }
    }
},  

*.sprite.scss 雪碧图

//$icon-sort-by: width; //width, height, size, name, none
//$icon-layout: smart;  //vertical, horizontal, diagonal, smart
$icon-spacing: 20px;    //The amount of transparent space, in pixels, around each sprite. 
//$icon-sprite-dimensions: false;   // Whether or not the dimensions of the sprite should be included in each sprite's CSS output. 

@import "one/*.png";

.code { @include one-sprite(code); }
.search { @include one-sprite(search); }

*.sprite-retina.scss 雪碧图 & Retina(视网膜显示)
Retina(视网膜显示)即在使用视网膜技术的屏幕(物理像素>设备像素)上使用原像素两倍的图片

$sprites: sprite-map("icon/*.png",  $layout: diagonal, $spacing: 20px); // import 1x sprites
$sprites-x2: sprite-map("icon-x2/*.png", $layout: diagonal);            // import 2x sprites


@mixin image-set($name) {   
    background-position: sprite-position($sprites, $name);
    background-image: sprite-url($sprites);
    background-image: -webkit-image-set(sprite-url($sprites) 1x, sprite-url($sprites-x2) 2x);
    background-image: -moz-image-set(sprite-url($sprites) 1x, sprite-url($sprites-x2) 2x);
    background-image: -ms-image-set(sprite-url($sprites) 1x, sprite-url($sprites-x2) 2x);
}

.wp-retina {
    display: block;
    width: 16px;
    height: 16px;
    @include image-set("wp");
}

.copy-retina {
    display: block;
    width: 16px;
    height: 16px;
    @include image-set("copy");
}