compass模块----Utilities----Sprites精灵图合图
css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大。也正是因为这一点,导致很多开发者懒于使用css雪碧图。
配置compass项目
$ compass init
会生成相应的目录和配置文件。在images
目录下建立logo
目录存放需合并的图标。项目目录结构如下:
- sass
|-- icons.scss
|-- screen.scss
- stylesheet
- images
|-- logo
config.rb 文件配置如下:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts" relative_assets = true // 使用相对目录
line_comments = false // 关闭行注释
合并雪碧图
输出所有雪碧图样式
新建一个文件icons.scss,在screen.scss中引入icons.scss。
在icons.scss里面引入sprites: @import "compass/utilities/sprites"
images文件里子目录logo:把所有图片放到这里。(方便将来将其和其他图片区分开来)
在icons.scss文件里将logo文件引入进来: @import "logo/*.png"; (*引入logo目录下的所有文件)。
@import "compass/utilities/sprites"; // 加载compass sprites模块
@import "share/*.png"; // 导入share目录下所有png图片
@include all-share-sprites; // 输出所有的雪碧图css
生成的代码中 .logo-sprite 是雪碧图的基础类生成的每个雪碧图默认的class规则是: .目录名-图片名 。
调用单个雪碧图样式
@import "compass/utilities/sprites"; // 加载compass sprites模块
@import "share/*.png"; // 导入logo目录下所有png图片
.main-logo{
@include logo-sprite("img1");
}
编译后的css为:
.logo-sprite, .main-logo {
background-image: url('../images/logo-sd097a30ac3.png');
background-repeat: no-repeat;
}
.main-logo {
background-position: 0 0;
}
利用魔术精灵选择器智能输出
比如hover
, active
, focus
, target
等。利用compass的魔术精灵选择器我们就可以智能的合并各状态的图标,并输出对应的css。使用时,我们需要将图标按照一定的规则命名。例如:
img1.png // 默认状态图标
img1_hover.png // hover状态图标
img1_active.png // active状态图标
编译后的css为:
.logo-sprite, .main-logo {
background-image: url('../images/logo-sd097a30ac3.png');
background-repeat: no-repeat;
}
.main-logo {
background-position: 0 0;
}
.main-logo:hover, .main-logo.img1-hover {
background-position: -120px 0;
}
.main-logo:active, .main-logo.img1-active {
background-position: -60px 0;
}
调出隐藏的logo.scss命令行:
compass sprite 'images/logo/*.png'
$logo-sprite-dimensions:用来控制输出CSS的时候是否根据图片大小对我们的相应类名css属性添加一个宽和高。
$logo-layout:修改合图布局方式。
--默认是垂直 horizontal水平的。
--diagonal斜对角线布局的。
--smart节省空间布局
$logo-sprite-dimensions: true;
$logo-layout: horizontal;
compass模块----Utilities----Sprites精灵图合图的更多相关文章
- compass模块----Utilities
引入Utilities: @import "compass/utilities"; 分别引入: @import "compass/utilities/color" ...
- CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
- compass与css sprite(雪碧图)
什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链 ...
- 【转载】利用Unity自带的合图切割功能将合图切割成子图
虽然目前网上具有切割合图功能的工具不少,但大部分都是自动切割或者根据plist之类的合图文件切割的, 这种切割往往不可自己微调或者很难维调,导致效果不理想. 今天逛贴吧发现了一位网友写的切割合图插件很 ...
- Cocos2d-JS项目之三:使用合图
studio里使用合图感觉和spriteBatchNode差不多,但有不同,合图只起到在加载资源时减少IO的作用,起不到批渲染的作用.其实想想,studio本来就是用来拼UI界面的,一个上点规模的UI ...
- compass模块----Helpers
Color Stops:在使用CSS3渐变属性生成图片的时候,有时候为了打造更丰富的渐变效果除了声明渐变线上的起始点和终止点的色值,还有声明一些中间点的色值,这些点我们就称之为Color Stops. ...
- 【UML 建模】UML建模语言入门 -- 静态图详解 类图 对象图 包图 静态图建模实战
发现个好东西思维导图, 最近开始用MindManager整理博客 . 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/deta ...
- Python交互图表可视化Bokeh:4. 折线图| 面积图
折线图与面积图 ① 单线图.多线图② 面积图.堆叠面积图 1. 折线图--单线图 import numpy as np import pandas as pd import matplotlib.py ...
- UML建模语言入门 -- 静态图详解 类图 对象图 包图 静态图建模实战
发现个好东西思维导图, 最近开始用MindManager整理博客 . 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/deta ...
随机推荐
- django: form fileupload - 1
本节介绍 Form 中一些字段类型的使用,以文件上传字段 FileField 为例:(注,其它字段和相关用法见官方文档中的 Forms -> Built-in Fields) 一,配置 urls ...
- Create new Android Virtual Device时不能创建
在Create new Android Virtual Device时不能创建... 因为之前有重装过系统,ADT和java都没有更换,不知道是不是有哪里的环境(C盘中的配置)出错了... LOG在下 ...
- centos静默式安装Oracle11g
1. Centos及Oracle版本 Centos:CentOS release 6.4 (Final) Oracle:linux.x64_Oracle_11gR2_database 2. 硬 ...
- Enumeration
Interface Enumeration<E> hasMoreElements() boolean hasMoreElements() 仅当此枚举对象包含至少一个以上元素为真:否则 ...
- Fling!
算法:深搜 很不错的一道题!!! Fling is a kind of puzzle games available on phone. This game is played on a board ...
- mysql索引之唯一索引
mysql 的唯一索引一般用于不重复的字段,一般会把表中的id设为唯一索引,创建唯一索引的目的不是为了提高查询速度,而是为了避免数据重复,注意:唯一索引可以有多个,但是列值必须唯一,创建唯一索引使用关 ...
- js图片实时加载
浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高.以下是笔者目前所 ...
- 网站UV,与IP、PV
什么是网站UV,与IP.PV在概念上的区别? UV(独立访客):即Unique Visitor,访问您网站的一台电脑客户端为一个访客.00:00-24:00内相同的客户端只被计算一次. PV(访问量) ...
- python list内容拷贝方法
先看如下代码: x = ['a','b','z'] y = x print y y[0] = 'w' print x,y 结果输出: >>> ['a', 'b', 'z'] #y l ...
- PyQt4环境搭建与使用
初次使用python写图形界面的工具时,用了Tkinter.wxpython,都是需要手写界面布局的,看api看的头疼觉得这样写太费劲了,于是搜了下看看别人都是怎样写python图形界面的. 在论坛上 ...