文档章节

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
浦东
程序员
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
【AngularJs学习笔记三】Grunt任务管理器

AngularJs学习笔记 【AngularJs学习笔记一】Bower解决js的依赖管理 【AngularJs学习笔记二】Yeoman自动构建js项目 【AngularJs学习笔记三】Grunt任务管理器 Grunt是一个基于JavaScript上的一...

陶邦仁
2016/01/24
215
0
Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

原文出处:css-tricks 译文出处:三桂 Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的。 所有你需要做的就是把它添加到你的资源构建工具...

css-tricks
2014/08/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部