compass sprite

使用compass自动合并css雪碧图

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

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

配置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:00;}.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:00;}.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>: 对应图标存放的文件夹名称，如上面例子中的：share和magic
  • <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:-5px0;
  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:-5px0;
  width:200px;
  height:35px;}

项目示例

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

compass合并雪碧图示例代码

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

时间： 2024-10-12 14:05:21

compass sprite的相关文章

requirejs + sass 实现的前端及 grunt 自动化构建

对于 现在的 vue . react .webpack 来说也许有点旧了,有时候,越简单的技术越可靠,备份一下 module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), compass: { development: { options: { generatedImagesDir:'public/src/slic

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 sprite

使用compass自动拼css sprite css sprite (css 雪碧)又叫css精灵,是一种图片拼合技术.多用在图标上,把几个图标拼成一个图片,页面加载的时候只需要load拼好的图片,然后使用background-position配合width.height来显示不同的图标.这样做可以减少页面请求数.但是,想想把一个个图标从psd上扣下来,合到一个图上,然后还要慢慢算background-position,这也真是醉了,而且后期如果改了图标,又要重新拼一次,拼完再算一次backgr

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

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

compass框架的sprite雪碧图的用法简要

---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样做的好处是:减少了网站的HTTP请求次数 **compass如何合并雪碧图** 1. 把需要合并的图片(1.png,2.png,3.png…)放在images文件下的新建一个文件夹test 2. 在SCSS文件中 用 @import 指向这些上述图片们,然后compass会自动将这些图片们合并成一个

compass制作sprite雪碧图

1.安装compass.(需要先安装ruby) 命令行:gem install compass 2.新建一个compass 项目 命令行:compass create myproject 3.在myproject中新建一个images文件夹,将需要转换的图片放入images新建的share文件中 并在scss文件中写入: @import "compass/utilities/sprites"; @import "share/*.png"; @include all-

使用 Compass 生成雪碧图

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

sass+compass起步

前言:Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organize

使用Compass制作雪碧图

遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.hongkiat.com/blog/compass-image-sprite/ 作者Thoriq Firdaus 译者zEx 前端性能优化,一直是前端开发中非常重要的一环,而其中静态资源特别是图片的优化,又占据了很大的比重.图片优化的方法有很多种,其中非常基本而常用的,就是雪碧图. CSS雪碧图就是将