Grunt Compass下Spriting以及Retina Sprite
Grunt Compass下Spriting以及Retina Sprite
赵利明 发表于3年前
Grunt Compass下Spriting以及Retina Sprite
  • 发表于 3年前
  • 阅读 40
  • 收藏 0
  • 点赞 0
  • 评论 0

##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");
}
共有 人打赏支持
粉丝 6
博文 6
码字总数 1866
×
赵利明
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: