文档章节

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
Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

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

飞翔的熊blabla
10/09
0
0
【AngularJs学习笔记三】Grunt任务管理器

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

陶邦仁
2016/01/24
215
0

没有更多内容

加载失败,请刷新页面

加载更多

同样是工作3年程序员,为什么别人每月25K你却只有15K?

你有没有静下心来思考过:同样是做了x年Java开发,为什么你的技术比别人差很多?为什么别人每月26K你却只有15K? 其实技术水平的高低和个人智商关系不大(毕竟能做Java编程开发大家都不会差)...

Java填坑之路
9分钟前
0
0
跨域问题:解决跨域的三种方案

当前端页面与后台运行在不同的服务器时,就必定会出现跨域这一问题,本篇简单介绍解决跨域的三种方案,部分代码截图如下,仅供参考: 方式一:使用ajax的jsonp 前端代码 服务器代码 使用该方...

rechardchensir
9分钟前
0
0
linux学习-1012

8.6 管道符和作业控制 8.7/8.8 shell变量 8.9 环境变量配置文件 扩展 bashrc和bash_profile的区别 http://ask.apelearn.com/question/7719 简易审计系统: http://www.68idc.cn/help/server/...

wxy丶
10分钟前
0
0
springboot dubbo 在程序初始化完成前 使用回声测试对服务依赖检测

<dubbo:consumer timeout="10000" check="false" /><dubbo:service delay="-1" /> @Component@Order(2)public class PrkServiceInit implements ApplicationListener {private Logge......

林伟琨
12分钟前
0
0
“网红架构师”解决你的Ceph 运维难题

Q1. 环境预准备 绝大多数MON创建的失败都是由于防火墙没有关导致的,亦或是SeLinux没关闭导致的。一定一定一定要关闭每个每个每个节点的防火墙(执行一次就好,没安装报错就忽视): CentOS s...

编程SHA
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部