文档章节

Grunt Compass下Spriting以及Retina Sprite

赵利明
 赵利明
发布于 2015/04/12 18:51
字数 283
阅读 40
收藏 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");
}

© 著作权归作者所有

共有 人打赏支持
赵利明
粉丝 5
博文 6
码字总数 1866
作品 0
浦东
程序员
私信 提问
CSS Sprites vs. Data URIs:在移动端,谁更快?

这篇文章是调查data URIs在移动端的行为三部曲中的最后一部,你可以查看我前面发表的文章,'On Mobile, Data URIs are 6x Slower than Source Linking' (在移动端,data URIs比source Link...

徐继开
2013/09/11
1K
0
Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置

grunt.initConfig方法 用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。 每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义...

菜鸟的进阶
2017/10/25
0
0
compass精灵图

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方,...

Billydotzhang
2016/11/17
9
0
Sprite Kit教程:制作一个通用程序 1

注:本文译自Sprite Kit Tutorial: Making a Universal App: Part 1 目录 UI规划:概述 UI规划:小结 开始 纹理图集 背景设置 鼹鼠的放置 弹出鼹鼠 何去何从 本文将介绍如何制作一个通用程序...

孙启超
2013/11/28
0
0
Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的。 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS...

飞翔的熊blabla
10/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IOC的学习(1)

1.IOC理论概要 java中,一个对象A怎么才能调用对象B? 当一个对象的构建,需要多个其他对象时,对象和对象有复杂的构建关系。spring帮助我们维系对象的依赖关系,降低系统的实现成本,前提是...

杨健-YJ
23分钟前
1
0
Spring 的 getBean 方法源码解析

文本将从以下几个方面介绍 相关文章 FactoryBean 接口 BeanFactory 接口 BeanFactory 接口 和 FactoryBean 接口的区别 getBean 方法的源码解析 Spring 循环依赖的解决方式 相关文章 Spring 中...

TSMYK
26分钟前
0
0
李鸿章六百多字参倒豪门重臣,晚清第一奏折,藏尽顶级权谋话术!

道光二十七年(1847年),二十四岁的李鸿章高中进士,列二甲第十三名。 在此期间,有桩轶事挺有意思。 会试时,李鸿章的房师为当时的名士孙锵鸣。发榜后,孙锵鸣见自己这一房只考中了李鸿章、...

乔老哥
32分钟前
1
0
PTA-基础编程题目集-7-14 求整数段和

给定两个整数A和B,输出从A到B的所有整数以及这些数的和。 输入格式: 输入在一行中给出2个整数A和B,其中−100≤A≤B≤100,其间以空格分隔。 输出格式: 首先顺序输出从A到B的所有整数,每...

niithub
32分钟前
4
0
Spring Qualifier的使用

摘要 spring 的 qualifier 平常使用一般直接是使用id 来限定,不过spring给我们提供了更强大的功能。 使用方法 直接使用 直接在@Qualifier中限定bean的id 在bean上使用@Qualifier来指定后续使...

52iSilence7
35分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部