compass精灵图-白红宇

compass精灵图

阅读量：7144 次

发布时间：2019-06-29

本文共 4837 字，大约阅读时间需要 16 分钟。

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

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

compass

安装compass

首先请确认电脑已经安装ruby及sass环境，ruby及sass的安装过程可参考：

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

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

接着安装compass:

$ gem install compass// 查看compass版本$ compass -vCompass 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上查看：

合并雪碧图

输出所有雪碧图样式

在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

说明：

<map>: 对应图标存放的文件夹名称，如上面例子中的：share和magic

<sprite>: 对应单个图标的名称，如上面例子中的: 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，当然也可以通过配置$<map>-clean-up: false;来保留旧的sprite。

配置sprite的基础类

在使用sprite时，compass会自动的生成一个基础类来应用公用的样式(如background-image)，默认的类名为$<map>-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;}

转载于:https://my.oschina.net/bzhang/blog/789398

你可能感兴趣的文章

用Python统计你的简书数据

查看>>

全票通过，百度 Doris 项目进入 Apache 基金会孵化器

查看>>

Retrofit2源码解析——网络调用流程(下)

查看>>

5G时代下的移动边缘计算（MEC）探索系列之二

查看>>

白衣天使要承包你的周末咯！快来3小时公益平台！

查看>>

用GitHub Issue取代多说，是不是很厉害？

查看>>

3 个实例带您了解如何快速迁移旧版的 Windows 应用程序

hanlp自然语言处理包的基本使用--python

查看>>

Linux网络协议栈(三)——网络设备(2)

查看>>

MAC下尝试PHP7 alpha版本的安装

查看>>

Laravel(1) 注册重写

查看>>

踩坑记：根据类型获取Spring容器中的Bean

SweepLoadingView-延时动画

查看>>