文档章节

Grunt Compass下Spriting以及Retina Sprite

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

© 著作权归作者所有

共有 人打赏支持
赵利明
粉丝 5
博文 6
码字总数 1866
作品 0
浦东
程序员
web頁面上的那些圖標

在一個HTML結構的頁面中,使用圖標最常接觸的是標籤和css屬性。純粹是為了顯示圖片而添加的標籤,適用於尺寸大的圖片,強調圖片的信息,不屬於頁面圖標的範疇(在web設計中,圖標和圖片是兩種...

掬一捧 ⋅ 2015/02/10 ⋅ 2

compass精灵图

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

Billydotzhang ⋅ 2016/11/17 ⋅ 0

Sprite Kit教程:制作一个通用程序 1

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

孙启超 ⋅ 2013/11/28 ⋅ 0

【AngularJs学习笔记三】Grunt任务管理器

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

陶邦仁 ⋅ 2016/01/24 ⋅ 0

Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

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

css-tricks ⋅ 2014/08/26 ⋅ 0

前端工程化之路(一)基于Yeoman:Yo+grunt/gulp+bower 搭建前端工程

转载请加说明:http://my.oschina.net/panpcui/blog/671921 ,谢谢 引言 现今,越来越多的前端集成开发工具涌现,个人觉得特别有必要让前端开发更规范、更系统、更高效。规范:让前端开发的编...

小小实习生 ⋅ 2016/05/09 ⋅ 0

【AngularJs学习笔记二】Yeoman自动构建js项目

AngularJs学习笔记 【AngularJs学习笔记一】bower解决js的依赖管理 【AngularJs学习笔记二】Yeoman自动构建js项目 Yeoman是Google的团队和外部贡献者团队合作开发的,。 。这三个工具是分别独...

陶邦仁 ⋅ 2016/01/22 ⋅ 0

django项目运行步骤

1.安装requirements.txt sudo pip install -r requirements.txt 2.配置settings.py文件 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'test', 'USER': 'root......

tavenpy ⋅ 2015/04/09 ⋅ 0

grunt-spritesmith 插件

grunt.initConfig({ sprite:{ all: { src: '../images/trade/haitao/index/sprite/*.png', dest: '../images/trade/haitao/index/sprites-product-icon.png', destCss: '../css/trade/haitao......

Shawn_Song ⋅ 2015/10/09 ⋅ 0

又一个选择 - Gulp.js

前言 还记得过年前的那篇介绍的文章,的强大,相信大家都见识了。年后打了两天的酱油,看了不少的插件和教程。发现了一个号称比要好的 - ,详细简介gulp.js。网上有很多比较和的文章。谈论到...

webchock ⋅ 2015/02/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部