资讯专栏INFORMATION COLUMN

使用compass自动合并css雪碧图(css sprite)

刘永祥 / 3472人阅读

摘要:使用雪碧图,能够减少页面的请求数降低图片占用的字节,以此来达到提升页面访问速度的目的。也正是因为这一点,导致很多开发者懒于使用雪碧图。本文就介绍下怎样使用来自动合并雪碧图。生成的每个雪碧图默认的规则是目录名图片名。

css雪碧图又叫css精灵css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大。也正是因为这一点,导致很多开发者懒于使用css雪碧图。

对于这种耗时、枯燥、重复性的工作,最好的解决方法还是交给工具去处理。本文就介绍下怎样使用compass来自动合并css雪碧图。

安装compass

首先请确认电脑已经安装rubysass环境,rubysass的安装过程可参考:

  

sass入门指南

安装完成后可通过以下指令确认:

$ ruby -v
ruby 2.0.0p451 (2014-02-24) [x64-mingw32]
$ sass -v
Sass 3.4.6 (Selective Steve)

接着安装compass:

$ gem install compass

// 查看compass版本
$ compass -v
Compass 1.0.1 (Polaris)

ps: 本文中代码运行环境为:sass: 3.4.6, compass: 1.0.1, 测试时请确认sass版本不低于3.4.6,compass版本不低于1.0.1

配置compass项目

进入项目目录,命令行中运行:

$ compass init

会生成相应的目录和配置文件。在images目录下建立share目录存放需合并的图标。项目目录结构如下:

- sass
- stylesheet
- images
  |-- share
  |-- magic
  |-- setting

config.rb文件配置如下:

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

relative_assets = true    // 使用相对目录
line_comments = false    // 关闭行注释

完整的项目目录示例可在github上查看:https://github.com/Bubblings/compass-sprite

合并雪碧图 输出所有雪碧图样式

sass目录下新建share.scss文件,并写入以下代码:

@import "compass/utilities/sprites";    // 加载compass sprites模块
@import "share/*.png";                    // 导入share目录下所有png图片
@include all-share-sprites;                // 输出所有的雪碧图css

命令行调用compass compile进行编译,此时会发现images目录下出现了一个合并后的图片share-xxxxxxxx.png, stylesheet目录下生成了对应的share.css文件:

.share-sprite, .share-github, .share-qq, .share-weibo {
  background-image: url("../images/share-s7fefca4b98.png");
  background-repeat: no-repeat;
}

.share-github {
  background-position: 0 0;
}

.share-qq {
  background-position: 0 -23px;
}

.share-weibo {
  background-position: 0 -47px;
}

至此,我们就实现了一个简单的雪碧图合并,而且只用了三行代码。是不是有点小激动^_^。
生成的代码中.share-sprite是雪碧图的基础类,后面介绍配置时会详细说明。生成的每个雪碧图默认的class规则是:.目录名-图片名。如果想自定义,我们可以通过下面调用单个雪碧图的方式来实现。

调用单个雪碧图样式

sass目录下新建single-share.scss文件,并写入以下代码:

@import "compass/utilities/sprites";    // 加载compass sprites模块
@import "share/*.png";                    // 导入share目录下所有png图片
.test {
    @include share-sprites(github);
}

编译后的css为:

.share-sprite, .test {
  background-image: url("../images/share-s7fefca4b98.png");
  background-repeat: no-repeat;
}

.test {
  background-position: 0 -23px;
}
利用魔术精灵选择器智能输出

有的时候我们的图标会有多种状态,比如hover, active, focus, target等。利用compass的魔术精灵选择器我们就可以智能的合并各状态的图标,并输出对应的css。使用时,我们需要将图标按照一定的规则命名。例如:

weibo.png            // 默认状态图标
weibo_hover.png     // hover状态图标
weibo_active.png     // active状态图标

sass目录下新建magic.scss文件,并写入以下代码:

@import "compass/utilities/sprites";
@import "magic/*.png";
@include all-magic-sprites;

编译后的css为:

.magic-sprite, .magic-weibo {
  background-image: url("../images/magic-s758f6928e8.png");
  background-repeat: no-repeat;
}

.magic-weibo {
  background-position: 0 0;
}
.magic-weibo:hover, .magic-weibo.weibo-hover {
  background-position: 0 -48px;
}
.magic-weibo:active, .magic-weibo.weibo-active {
  background-position: 0 -24px;
}
雪碧图配置

我们已经利用compass实现了简单雪碧图的合成。当然compass还提供了很多可供配置的选项,下面来一一介绍。

PS: 以下的配置选项不再多带带举例,可参考示例项目中的setting.scss文件。

先来看下配置相关的语法:

$-: setting;                // 配置所有sprite
$--: setting;    // 配置单个sprite

说明:

: 对应图标存放的文件夹名称,如上面例子中的:sharemagic

: 对应单个图标的名称,如上面例子中的: weibo, qq, github

配置sprite间距
$-spacing: 5px;                // 配置所有sprite间距为5px,默认为0px
$--spacing: 10px;        // 配置单个sprite间距为10px,默认继承$-spacing的值
配置sprite重复性
$-repeat: no-repeat/repeat-x;        // 配置所有sprite的重复性,默认为no-repeat
$--repeat: no-repeat/repeat-x;// 配置单个sprite的重复性,默认继承$-repeat的值
配置sprite的位置
$-position: 0px;                // 配置所有sprite的位置,默认为0px
$--position: 0px;        // 配置单个sprite的位置,默认继承$-position的值
配置sprite的布局方式
$-layout: vertical/horizontal/diagonal/smart;        // 默认布局方式为vertical
清除过期的sprite
$-clean-up: true/false;        // 默认值为true

每当添加、删除或改变图片后,都会生成新的sprite,默认情况下compass会自动的移除旧的sprite,当然也可以通过配置$-clean-up: false;来保留旧的sprite。

配置sprite的基础类

在使用sprite时,compass会自动的生成一个基础类来应用公用的样式(如background-image),默认的类名为$-sprite,上面例子中的.share-sprite, .magic-sprite就是这个基础类,当然compass也提供了自定义这个类名的选项:

$-sprite-base-class: ".class-name";
魔术精灵选择器开关

上面已经介绍了怎样利用利用魔术精灵选择器智能输出sprite,默认情况下compass是开启这个功能的,也就是说compass默认会将以_hover, _active等名字结尾的图片自动输出对应的:hover, :active等伪类样式。当然如果不想这样的话,也可以禁用它。

$disabled-magic-sprite-selectors: false;    // 默认为true
设置sprite尺寸

我们在合并雪碧图时,很多时候图片的尺寸都不一样,那么在使用时我们如何给每个sprite设置尺寸呢?compass有提供自动设置每个sprite尺寸的配置,默认是关闭的,我们只需手动启用即可。

$setting-sprite-dimensions: true;    // 启用自动设置sprite尺寸,默认值为false

这时输出的样式中会自动加上图片的尺寸,例如:

.setting-compass {
  background-position: -5px 0;
  height: 35px;
  width: 200px;
}

当然,如果只对某个sprite多带带设置的话,compass也提供了这个功能。语法如下:

$-sprite-width($name);     // $name为合并前的图片名称
$-sprite-height($name);

例如:

.special {
    @include setting-sprite(compass);
    width: setting-sprite-width(compass);
    height: setting-sprite-height(compass);
}

则输出的css为:

.special {
  background-position: -5px 0;
  width: 200px;
  height: 35px;
}      
项目示例

github上放了一个简单的示例可供参考:

  

compass合并雪碧图示例代码

原文地址:http://riny.net/2014/compass-sprite/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111023.html

相关文章

  • postcss-lazysprite: 一种生成CSS 雪碧的懒惰姿势

    摘要:无论是早期工具,还是现在流行的配合这类构建工具而产生的雪碧图插件。 本文原文链接:https://devework.com/postcss-...,转载请注明原始来源,谢谢! showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其C...

    BearyChat 评论0 收藏0
  • CSS > 关于雪碧预处理和后处理方案的讨论

    摘要:预处理方案代表和预处理方案是预先指定需要生成的雪碧图切片元素,由工具合成后,得到相应的雪碧图和数据文件,开发中将二者投入使用。预处理方案一般以页面为单元组织雪碧图。结语关于雪碧图的处理方案的讨论就到此结束了。 广告:SF 里弄了个 CSS 小圈子,欢迎一起来讨论问题 前端小图标处理方案众多,本文主要介绍基于雪碧图的处理方案,分析雪碧图的预处理和后处理模式的得与失,以及在项目中通常会遇到...

    hyuan 评论0 收藏0
  • 浅谈 CSS Sprites 雪碧应用

    摘要:编写配置文件,以下是关键配置代码雪碧图合并输出到文件参数执行目录参数生成的和图片的文件名之所以推荐,是因为非常的灵活,看懂模块的可以根据你的项目情况编写对应的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题;目前小图标显示常见有两种方式...

    MkkHou 评论0 收藏0
  • 使用 Gulp 自动化构建工具快速搭建项目

    摘要:通过本文,我们将学习如何使用来改变开发流程,从而使开发更加快速高效。中文网站详细入门教程使用是基于的,需要要安装为了确保依赖环境正确,我们先执行几个简单的命令检查。详尽使用参见官方文档,中文文档项目地址 为了UED前端团队更好的协作开发同时提高项目编码质量,我们需要将Web前端使用工程化方式构建; 目前需要一些简单的功能: 1. 压缩HTML 2. 检查JS 3. 编译SA...

    glumes 评论0 收藏0
  • 雪碧sprity 合并使用心得

    摘要:介绍是一个模块化的雪碧图生成工具会根据目录中的图片生成相应的雪碧图和样式文件,支持图,可以内嵌编码格式的图,支持不同的图片格式和有不同的图片引擎可以选择。 介绍 sprity 是一个模块化的雪碧图生成工具会根据目录中的图片生成相应的雪碧图和样式文件,支持retina图,可以内嵌base64 编码格式的图,支持不同的图片格式和有不同的图片引擎可以选择。sprity 的前身是css-sp...

    vboy1010 评论0 收藏0

发表评论

0条评论

刘永祥

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<