在css文件中自动显示图像
Nikwus的Python项目详细描述
nikwus是一个自动创建css精灵的工具。它通过解析css来工作 文件并将它能找到的所有背景图像添加到精灵图像。
css被重写以使用生成的图像和所有背景位置 都写了。
为了充分利用nikwus，必须将一些自定义css规则添加到 css文件。
用法
>从现有的Python代码中使用NIKWUS作为库。公共方法 nikwus.sprite提供，它有三个参数：
- directory：精灵写入的图像目录。
- cssfile：要处理的css文件的文件名。默认精灵 将与此文件同名，扩展名更改为css。 png。
- outfile（可选）：要在其中写入转换后的css文件的文件名 到。如果未提供此选项，则会覆盖原始css文件。
示例：
nikwus.sprite('img/icons/', 'css/main.css')
自定义规则
可以在css文件中使用以下规则来更改nikwus的行为。
-sprite-name
使用-sprite-name可以生成多个精灵。每一张照片 不指定这将进入默认精灵。
示例：
.icon.world {
background: url(world.png) no-repeat;
/* Put login-related icons into a separate sprite for fast loading */
-sprite-name: login;
}
-sprite-selector
默认情况下，nikwus将重复整个背景，包括 每个css规则。通过使用sprite选择器，这是可以避免的，只有 将设置背景位置。
选择器也可用于生成retina版本，请参见章节 在视网膜下面。
示例：
.icon {
/* This becomes the container for the default sprite */
-sprite-selector: default;
}
.login-icon {
/* Login icons are put into a separate sprite, that will be configured
on this CSS rule */
-sprite-selector: login;
}
.icon.world {
background: url(world.png) no-repeat;
-sprite-name: login;
}
.icon.mars {
background: url(mars.png) no-repeat;
/* This does not have a ``-sprite-name``, so it goes into the default
sprite */
}
-sprite
可以通过使用^{tt11}关闭单个css规则的spring$ 宣言。.gif图像默认情况下不包括在精灵中，因为它们是 通常用于动画背景。可以通过使用 -sprite: yes。
示例：
.logo {
background: url(logo.png) no-repeat;
-sprite: no;
}
.check {
background: url(check.gif) no-repeat;
-sprite: yes;
}
-sprite-autosize
默认情况下，nikwus会将图像的宽度和高度写入其css中。 规则。这可以用-sprite-autosize关闭。
如果：
- 它与sprite选择器规则中指定的完全相同
- 此规则中已经指定了宽度和/或高度
示例：
.icon.world {
background: url(world.png) no-repeat;
-sprite-autosize: no;
}
.icon.mars {
/* Sizes won't be specified for this icon either, because it already
has a width */
background: url(mars.png) no-repeat;
width: 10px;
}
视网膜精灵
对于像素密度更高的移动设备，建议创建 不同的精灵利用这个事实。
nikwus通过指定一个特殊的-sprite-selector来支持这一点。开始于 将css更改为以下内容：
.icon {
-sprite-selector: default;
}
.icon.world {
background: url(world.png) no-repeat;
}
/* Retina Handling */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.icon {
-sprite-selector: default 2x;
}
}
现在对于css中指定的每个图像，一个单独的retina版本 需要存在。在上面的示例中，world.png需要附带 world-2x.png图像。第二个版本的大小必须是 原版的。
如果找不到2x版本，或者如果它是 不是两倍大。
支架
niwkus由Patrice Neff开发，用于 Squirro。项目是 hosted at GitHub。
欢迎加入QQ群-->： 979659372
