SmartSprites 学习笔记

SmartSprites 可以让你很容易的使用 css sprites, 并且容易维护, 你可以在 css 文件中插入一些标记和指令, 来指示某些图片是否放入 css sprites 图片里, SmartSprites 会解析你的css 文件去自动生成合成图, 并且生成需要的样式. 如果图片有修改，只需执行一下命令，新的sprite就又生成了。这样就可以大大的提高开发效率，维护起来也比较方便。

快速引导：

1.       下载并且安装 jdk1.5 以上版本。

2.       下载SmartSprites http://csssprites.org/download.html?v0.2.6 并解压到任意目录下。

3.       修改smartsprites.cmd文件，找到java %OPTS% -Djava.ext.dirs = lib org.carrot2.labs.smartsprites.SmartSprites 这行，将lib替换成该目录下lib文件夹的绝对路径。

4.       配置环境变量，path后边追加smartsprites的绝对路径；如：d:/smartsprites-0.2.8

5.       编写需要的css文件，如：style.css

#web {

    width: 17px;

    height: 17px;

    background-repeat: no-repeat;

    background-image: url(../img/icon1.png);

}

#logo {

    width: 50px;

    background-repeat: no-repeat;

    background-position: top right;

    background-image: url(../img/icon2.png);

}

#main-box {

    background-repeat: repeat-x;

    background-position: 5px left;

    background-image: url(../img/icon3.png);

}

6.       用 smartsprites 的指令注释 css 文件

/** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */

#web {

    width: 17px;

    height: 17px;

    background-repeat: no-repeat;

    background-image: url(../img/icon1.png); /** sprite-ref: mysprite; */

}

#logo {

    width: 50px;

    background-repeat: no-repeat;

    background-position: top right;

    background-image: url(../img/icon2.png); /** sprite-ref: mysprite; sprite-alignment: right */

}

#main-box {

    background-repeat: repeat-x;

    background-position: 5px left;

    background-image: url(../img/icon3.png); /** sprite-ref: mysprite; sprite-alignment: repeat; sprite-margin-top: 5px */

}

7.       打开cmd命令行窗口,键入smartsprites d:/example/style.css。

在成功完成之后，SmartSprites 会根据 sprite 指令在指定的位置上创建合并好的图片，

同时创建一个相应的 css 文件，后缀增加 -sprite，原始的 css 文件保持不变。

style-sprite.css :


　　#web {
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    background-image: url('../img/mysprite.png');
    background-position: left -0px;
}
#logo {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: top right;
    background-image: url('../img/mysprite.png');
    background-position: right -17px;
}
#main-box {
    background-repeat: repeat-x;
    background-position: 5px left;
    background-image: url('../img/mysprite.png');
    background-position: left -64px;
}


8.       将 html 中的原始 css 文件替换成新的，如：style.css -> style-sprite.css。

SmartSprites 指令剖析

Sprite Image 指令

上面第6步中红颜色的标记，定义以/** sprite: 开头，必须在单独的一行，一个css文件可以包含多个sprite image 指令。sprite image 指令包含如下属性：

Sprite ID 语法为 ：sprite：unique-id, 必须属性， 指定 sprite image 一个唯一的标识符以便引用 , 每个唯一的 sprite id，SmartSprites 将会创建一个 sprite image。

Sprite image location 语法为：sprite-image：url( 'path/name.(png | gif | jpg)' )，必须属性, 生成sprite image相对于css文件的位置（写绝对路径也可以）， 图片格式支持 gif, png and jpg。在该sprite image的url里面可以包含一些变量${ variable}，这里面的variable可以是sprite (Sprite ID)，md5或者date。你可以把这些变量放在url的任何位置，比如：

sprite-image: url('../img/logo-${md5}.png')

sprite-image: url('../${date}/${sprite}.png')

sprite-image: url('../sprite.png?${md5}')

Sprite image layout 语法为：sprite-layout：vertical  |  horizontal，非必须属性，指定图片是水平还是垂直，默认值为horizontal。

Matte color语法为：sprite-matte-color: #ff8822，非必须属性，默认值:#ffffff. 如果把图片保存为 gif 或者 png8 格式的时候， 可以使用 matte color 来指定渲染透明的部分。

Sprite 引用指令

以蓝色标记， 用来告诉 SmartSprites 指定的背景图片应该放入哪个 sprite image，sprite 引用指令必须和css 的 background-image 属性在一行内， background-image 属性指定图片的相对路径 （绝对路径不行）。引用指令以 /** sprite-ref: 开始，包含如下属性：

Sprite Reference，语法为：sprite-ref: sprite-id，必选项，引用一个声明过的sprite， 指定的图片将依靠这个申明放入对应的 sprite image 里面。

Sprite Alignment, 语法为：sprite-alignment: left | right | top | bottom | repeat；非必须属性，垂直布局时默认值为left，水平布局时默认值为top， 定义指定图片对于 sprite image 的边缘对齐方式。对于垂直对齐的 sprites，允许的值是 left 和 right，同理，水平的是 top 和 bottom。当图片需要平铺时，则使用repeat。

Sprite margins , 语法为：sprite-margin-(left | right | top | bottom): OFFSETp，非必须属性，默认值为0px, 指定图片和周围图片或者和 sprite 边的距离，当原始图片没有放置在盒子的边上时，这个属性可能会有用。示例：background-position: 5px left，注意：只允许像素值，并且margin不能缩写。

注意事项和好的建议

1.       在使用SmartSprite之前不要使用CSS Sprite。

2.       把background属性分写成background-image，background-repeat……

3.       将需要平铺的图片在平铺方向切得尽可能小。

4.       尽可能让你的背景图片覆盖到整个元素，不要只是他的一部分。

5.       需要水平（垂直）平铺的图片必须添加在垂直（水平）布局的Sprite中。

6.       background-image 后面不能再有 background-image 或 background-postion属性，否则新的规则将会被他们覆盖。

7.       Sprite引用指令必须和“background-image：url(xxx.jpg);”在一行内，即（中间不能有回车）。

8.       sprite-margin-* 的值不能为负数。

9.       sprite-margin-*的值只能以“px”为单位。

10.   “/**”后边要有一个空格。（很变态，这个问题很容易被忽略，且不易被发现）

11.   只接受 jpg、png 和 gif 格式的图片。

12.   所有的属性中的“sprite”，都不要写成复数形式“sprites”。

SmartSprites 运行的方法

目前我只会三种运行方法：

1．  smartsprites  d:/example/example.css

直接编译example.css文件（这里貌似不应该叫做编译，但是为了方便我表达我就这么叫了）。

2．  smartsprites  --root-dir-path  d:/example

以 d:/example 为根目录，编译 d:/example 下面的所有css文件。

3．  Smartsprites  d:/example/example.css  --document-root-dir-path  d:/root

编译 example.css ，把生成的sprite image 和新的css文件输出到d:/root 目录下。

4.Smartsprites 对ie6 下的半透明图片也有很好的支持，smartsprites  d:/example/example.css --sprite-png-ie6

这样可以生成两张图片，mysprite.png 和 mysprite-ie6.png

css变为

style-sprite.css :


#web {
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    background-image: url('../img/mysprite.png');
　　-background-image: url('../img/mysprite-ie6.png');//ie6 hack
    background-position: left -0px;
}
#logo {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: top right;
    background-image: url('../img/mysprite.png');
　　-background-image: url('../img/mysprite-ie6.png');//ie6 hack
    background-position: right -17px;
}
#main-box {
    background-repeat: repeat-x;
    background-position: 5px left;
    background-image: url('../img/mysprite.png');
　　-background-image: url('../img/mysprite-ie6.png');//ie6 hack
    background-position: left -64px;
}

5.自定义新css的后缀名 smartsprites  d:/example/example.css --css-file-suffix -ooxx

产生新的css为 style-ooxx.css

 

 

 

 

 

SmartSprite 官网：http://csssprites.org/