使用Compass制作雪碧图

遇见好的文章,笔者也会转载。但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践。所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考。
这篇文章转载自:http://www.hongkiat.com/blog/compass-image-sprite/
作者Thoriq Firdaus
译者zEx

前端性能优化,一直是前端开发中非常重要的一环,而其中静态资源特别是图片的优化,又占据了很大的比重。图片优化的方法有很多种,其中非常基本而常用的,就是雪碧图。
CSS雪碧图就是将几个图片拼合成一张图片,以此来减少HTTP请求的方法,并且可以提升网站的加载性能。除了使用传统的方法在PS中手动进行拼合之外,还有一些简便的网站或者工具可以帮我们完成这项工作。
在这里,作者像我们强烈推荐使用Compass的sprite函数,现在就让我们来看看,这种方法到底好在哪里。

Compass的安装

要使用Compass,首先要安装它。在这里多说一句,Compass跟SASS的关系,好比jQuery和JavaScript的关系。SASS是基于Ruby环境的,所以:

  • 安装Ruby。具体方法请自行搜索。
  • Ruby环境内有个包管理器——GEM,它类似于Nodejs下的NPM,它随着Ruby一起被安装,因此不需要额外安装。
  • 如果国外服务器不给力,也可以把GEM的源换成国内的,比如淘宝:只需执行以下命令:gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
  • 命令行模式下执行gem install compass,SASS和Compass就能自动安装好了。

注:具体的SASS使用方法请自行搜索。

开始使用Compass

在使用Compass工作之前,我们需要创建一个Compass项目然后监视它。这样,当这个项目中包含的图片和scss文件一发生改变,Compass就会自动编译成合适的形式。

打开命令行终端,输入以下命令。

compass create /path/to/project
cd /path/to/project
compass watch

合并图片

我们在images/browsers/文件夹下有一些icon图片,命名为XXX.png

在Compass添加这些icon,我们可以在.scss文件中使用@import语法指向图片文件夹下的所有png扩展名的图片。就像下面这样:

@import "browers/*.png";

保存文件之后,Compass会将这些图片进行合并,然后生成一个新的图片文件,如下:

雪碧图陈列方向

此外,我们还可以设置雪碧图排列的方向,正如你刚才看到的图片截屏,图片默认是纵向的。假设纵向排列不能满足要求,我们可以使用$<map>-layout:horizontal;或者$<map>-layout:diagonal;变量来指定他们水平排列或者对角线排列,将变量中的<map>替换成你存储图片的文件夹的名字。

  • 水平排列例子
$broswers-layout:horizontal;
@import "browsers/*.png";

  • 对角线排列例子
$broswers-layout:diagonal;
@import "browsers/*.png";

在样式表中添加图片

一旦我们将图片合并完,我们就可以在样式表中的背景图中调用它。我们可以用传统的做法:

.chrome {
    background-position: 0 0; width: 128px; height: 128px;
}
.firefox {
    background-position: 0 -133px; width: 128px; height: 128px;
}
.ie {
    background-position: 0 -266px; width: 128px; height: 128px;
}
.opera {
    background-position: 0 -399px; width: 128px; height: 128px;
}
.safari {
    background-position: 0 -532px; width: 128px; height: 128px;
}

在Compass中,我们有更简单的办法,首先,我们用@include all-<map>-sprites这个语法来生成一些CSS规则。

@include all-browsers-sprites

当上面编译成正常的css时,除了会生成背景图的声明,还有对应的位置,如下所示:

.browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie, .browsers-opera, .browsers-safari {
  background: url(‘/images/browsers-sad8e949931.png‘) no-repeat;
}
.browsers-chrome {
    background-position: 0 0;
}
.browsers-firefox {
    background-position: 0 -128px;
}
.browsers-ie {
    background-position: 0 -256px;
}
.browsers-opera {
    background-position: 0 -384px;
}
.browsers-safari {
    background-position: 0 -512px;
}

或者,我们可以用@include <map>-sprite(image-name)语法将背景图中的某一个对应的位置图片传给指定的选择器,下面是一个例子:

li{
    @include browsers-sprite(safari);
}

然后,Compass会聪明的识别出图片的位置,不用我们明确指出,在正常的css中,上面代码会转换成:

.browsers-sprite, li {
  background: url(‘/images/browsers-sad8e949931.png‘) no-repeat;
}
li {
    background-position: 0 -512px;
}

指定容器的尺寸

最后我们要做的是指定需要显示背景图片的容器的宽高属性。我们传统的做法是手动查看图片的宽和高(绝大多数情况是通过查看图片信息或图片属性获得)。

使用Compass,我们可以使用-sprite-height(image-name)或者<map>-sprite-width(image-name)函数来获得图片的宽和高。在下面这个例子,我们会获取其中一个图片的宽和高,并将值存储给变量。再使用@include指令获得分配背景图。

&height:browsers-sprite-height(safari);
&width:browsers-sprite-width(safari);
li{
    display:inline-block;
    height: $height;
    width: $width;
    @include browsers-sprite(safari);
}

当我们编译上面这些代码,他就会转成下面这些正常的CSS。

.browsers-sprite, li {
    background: url(‘/images/browsers-sad8e949931.png‘) no-repeat;
}
li {
    display: inline-block;
    height: 128px;
    width: 128px;
    background-position: 0 -512px;
}

结论

通过上面的例子,相信读者都已经明白了Compass制作雪碧图的方便之处。实际上,Compass除了这些创建CSS雪碧图的基本函数,Compass还有很多有用的函数可以使用。

英文出处:http://www.hongkiat.com/blog/compass-image-sprite/

中文译文:http://www.w3cplus.com/preprocessor/compass-image-sprite.html

时间: 2024-10-18 15:14:29

使用Compass制作雪碧图的相关文章

Sass和Compass制作雪碧图

1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 [email protected]命令引用 .Compass看到@import指令的参数为*.png时,它会假定将这个目录下的所有.png图片制作成一张雪碧图 你也可以通过一定的规则让它按照自己需要的图片以及排版来生成相应的雪碧图,设置如下: 第一个框框里面的设置是把所有color文件夹下的图片合成一张大图,同事会编译出对应的css文件. 第二个框框里面的设置是把colo

compass做雪碧图

由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when deployed: #配置服务器路径 http_path = "http//:www.baidu.com/" #配置css sass images javascripts路径 css_dir = "public/stylesheets" sass_dir = "pu

使用 Compass 生成雪碧图

使用 Compass 创建一个项目 要在一个新项目中使用 Compass,可以打开命令行工具并输入如下指令 compass create my-project 如果 my-project 目录不存在,上述命令会创建一个叫做 my-project 的目录,并在其中添加以下文件: 如果你没有为compass create命令传递一个目录参数,它将使用你当前所在的目录. 在config.rb文件中,你可以对Compass的一些配置进行修改,例如资源位置和压缩程度.sass目录包含了一些初始的样式表,你

制作雪碧图代码示例

制作雪碧图的辅助工具是ps,先要测出所要的图片的宽高写到代码中去,给它预留位置大小,然后测出所要点击后的图标移动位置的宽高写入代码. 代码示例:①.选择器名字{ width:xxPX              (这里可以是正负数,代表的是向左还是向右移动) height:xxPX background:图片位置      xxPX   xxPX(这里指所要移动的像素) } ②. 选择器:hover{                                          (这里代码意思

Photoshop制作雪碧图技巧

雪碧图,就是将网页制作中使用的多个小图片合并成一个图片,使用css技术将这张合成的图片应用在网页不同的地方,雪碧图可以减少网页加载时的http请求数,优化网页性能. 步骤: 1.使用Photoshop新建一张背景透明的图片 2.将小图片复制到此图片中,排列好每个图像的位置,图片幅面不够可以用画布大小调整大小 3.按照所有小图片的范围裁剪图片,存为透明背景的png图片 原文地址:https://www.cnblogs.com/jyue/p/10504005.html

compass与css sprite(雪碧图)

什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链接:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites 优点:1.减少页面请求数 2.降低图片占用字节 缺点:1.拼图麻烦 2.后期维护麻烦 为什么使用compass? 最近项目中需要使用到很多小图片,想用

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

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大.也正是因为这一点,导致很多开发者懒于使用css雪碧图. 对于这种耗时.枯燥.重复性的工作,最好的解决方法还是交给工具去处理.本文就介绍下怎样使用compass来自动合并css雪碧图. 安装compass 首先请确认电脑已经安装ruby及sass环境,ruby及sass的安

前端工程师技能之photoshop巧用系列第五篇——雪碧图

显示目录 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇--雪碧图 定义 css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中.使用雪碧图的处理方式可以实现两个优点: [1]减少http请求次数 [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) 凡事都不完美,实现优点的同时也带来了缺点,即提

Web优化之雪碧图

最近访问凡客诚品产品页留意了一下,这个页面的一些图动态做成了雪碧图,如: 从这张图片我们可以看到.SpriteWashings这个样式的背景图是通过joinimages.ashx动态生成,这个想法很好,但是没有生成样式.所以它的html使用了style="background-position: 0px -80px"这个来定位,个人认为这种方式不好,应该通过添加class 来定位,这就需要生成雪碧图的时候要生成相应的样式. 生成雪碧图的原理很简单:根据多个图片地址生成对应的Bitmap