compass模块UtilitiesSprites精灵图合图_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了compass模块UtilitiesSprites精灵图合图_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2875字，纯文字阅读大概需要5分钟。
内容图文
css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。使用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方，就是拼图和后期维护的成本比较大。也正是因为这一点，导致很多开发者懒于使用css雪碧图。 配置compass项目
$ compass init
会生成相应的目录和配置文件。在images目录下建立logo目录存放需合并的图标。项目目录结构如下：
- sass
|-- icons.scss
|-- screen.scss- stylesheet- images |-- logo
config.rb 文件配置如下：
1 http_path = "/"2 css_dir = "stylesheets"3 sass_dir = "sass"4 images_dir = "images"5 javascripts_dir = "javascripts"6 7 relative_assets = true // 使用相对目录8 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目录下的所有文件）。
1 @import "compass/utilities/sprites"; // 加载compass sprites模块2 @import "share/*.png"; // 导入share目录下所有png图片3 @include all-share-sprites; //输出所有的雪碧图css
生成的代码中 .logo-sprite 是雪碧图的基础类生成的每个雪碧图默认的class规则是： .目录名-图片名 。
调用单个雪碧图样式
1 @import "compass/utilities/sprites"; // 加载compass sprites模块2 @import "share/*.png"; // 导入logo目录下所有png图片3 .main-logo{4 @include logo-sprite("img1");5 } 编译后的css为：
1 .logo-sprite, .main-logo {2 background-image: url('../images/logo-sd097a30ac3.png');3 background-repeat: no-repeat;4 }5 .main-logo {6 background-position: 0 0;7 } 利用魔术精灵选择器智能输出
比如hover, active, focus, target等。利用compass的魔术精灵选择器我们就可以智能的合并各状态的图标，并输出对应的css。使用时，我们需要将图标按照一定的规则命名。例如：
img1.png // 默认状态图标img1_hover.png // hover状态图标img1_active.png // active状态图标
编译后的css为：
1 .logo-sprite, .main-logo { 2 background-image: url('../images/logo-sd097a30ac3.png'); 3 background-repeat: no-repeat; 4 } 5 .main-logo { 6 background-position: 0 0; 7 } 8 .main-logo:hover, .main-logo.img1-hover { 9 background-position: -120px 0;10 }11 .main-logo:active, .main-logo.img1-active {12 background-position: -60px 0;13 }
调出隐藏的logo.scss命令行：
compass sprite 'images/logo/*.png'
$logo-sprite-dimensions：用来控制输出CSS的时候是否根据图片大小对我们的相应类名css属性添加一个宽和高。
$logo-layout:修改合图布局方式。
--默认是垂直 horizontal水平的。
--diagonal斜对角线布局的。
--smart节省空间布局
1 $logo-sprite-dimensions: true;2 $logo-layout: horizontal;
内容总结
以上是互联网集市为您收集整理的compass模块UtilitiesSprites精灵图合图_html/css_WEB-ITnose全部内容，希望文章能够帮你解决compass模块UtilitiesSprites精灵图合图_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。