New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
8788 opened this Issue Dec 9, 2018 · 0 comments

Comments

Projects
None yet
1 participant
@8788
Copy link
Owner

8788 commented Dec 9, 2018

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

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

compass

安装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/8788/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文件。

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

$<map>-<property>: setting;				// 配置所有sprite
$<map>-<sprite>-<property>: setting;	// 配置单个sprite

说明:

  • <map>: 对应图标存放的文件夹名称,如上面例子中的:sharemagic
  • <sprite>: 对应单个图标的名称,如上面例子中的: weibo, qq, github

配置sprite间距

$<map>-spacing: 5px;				// 配置所有sprite间距为5px,默认为0px
$<map>-<sprite>-spacing: 10px;		// 配置单个sprite间距为10px,默认继承$<map>-spacing的值

配置sprite重复性

$<map>-repeat: no-repeat/repeat-x;		// 配置所有sprite的重复性,默认为no-repeat
$<map>-<sprite>-repeat: no-repeat/repeat-x;// 配置单个sprite的重复性,默认继承$<map>-repeat的值

配置sprite的位置

$<map>-position: 0px;				// 配置所有sprite的位置,默认为0px
$<map>-<sprite>-position: 0px;		// 配置单个sprite的位置,默认继承$<map>-position的值

配置sprite的布局方式

$<map>-layout: vertical/horizontal/diagonal/smart;		// 默认布局方式为vertical

清除过期的sprite

$<map>-clean-up: true/false;		// 默认值为true

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

配置sprite的基础类

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

$<map>-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也提供了这个功能。语法如下:

$<map>-sprite-width($name); 	// $name为合并前的图片名称
$<map>-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合并雪碧图示例代码

@8788 8788 added the 2014 label Dec 9, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment