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 ...
随机推荐
- Java多线程练习
国际惯例,先贴出代码 package jiankong; import java.util.Date; public class jiankong { public static void main( ...
- Linux 定时执行shell脚本_crontab
1.查看任务[oracle@XXXXX OracleBackA]$ crontab -l 2.新增任务[oracle@XXXXX OracleBackA]$ crontab -e 3.每天14点40执 ...
- (五)JS学习笔记 - Sizzle选择器
Sizzle词法解析 sizzle对于分组过滤处理都用正则,其中都有一个特点,就是都是元字符^开头,限制匹配的初始,所以tokenize也是从左边开始一层一层的剥离. •可能会应用到正则如下: // ...
- POI创建Excle
1.导包 2.Demo Workbook wb=new HSSFWorkbook();//创建工作空间 Sheet sh= wb.createSheet("工作表1");//创建工 ...
- 网络流——增广路算法(dinic)模板 [BeiJing2006]狼抓兔子
#include<iostream> #include<cstring> #include<algorithm> #include<cmath> #in ...
- Google的Guava工具类splitter和apache stringutil对比 编辑
一直用的是apache的stringutil工具类,其实google的工具类项目 guava中居然也有字符串的分隔类splitter的,在 http://code.google.com/p/guava ...
- GridView Footer页脚统计实现多行
在使用GridView时有时会需要多行显示页脚Footer的统计,下面是一种解决方法,仅仅供各位参考 在GridView的RowCreated事件中添加多行页脚,实例代码如下: protected v ...
- CentOS 5上Apache配置虚拟主机范例
昨天实践了下在CentOS 5上通过Apache直接配置虚拟主机,服务器没有安装面板软件,所以只能通过SSH远程连接操作了.Apache安装在/etc/httpd目录下,这个即是Apache的根目录, ...
- POJ1840 hash
POJ1840 问题重述: 给定系数a1,a2, ..,a5,求满足a1 * x1 ^ 3 + a2 * x2 ^ 3 +... + a5 * x5 ^ 3 = 0的 xi 的组数.其中ai, xi都 ...
- HTML&CSS基础学习笔记1.21-语义化标签
语义化标签 “语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益. HTML 标签语义化是让大家直观的认识标签和属性的用途和作用,很明显<hx ...