雪碧大大i|勒布朗11低帮雪碧配色|雪碧哥 - 雪碧配色哪种好
您好，雪碧配色专卖店为您提供最新雪碧配色,雪碧大大i,勒布朗11低帮雪碧配色,雪碧哥以及网上雪碧配色哪种最好!
【 雪碧配色 第1名 】
【 雪碧配色 第2名 】
【 雪碧配色 第3名 】
您是否在找：
上一篇：　　下一篇：标签：至少1个，最多5个
可能是最好用的雪碧图工具了，好吧，至少是我用过最好用的。
首先安装css-sprite，安装这里很坑，等我最后再说。
npm install css-sprite
我是使用gulp来构建前端代码，所以还需要安装gulp和gulp-if,安装好之后就可以开始配置啦。
新建一个task:
var gulp = require('gulp');
var gulpif = require('gulp-if');
gulp.task('sprites',function(){
gulp.src('img/icon/*.png')
//这是要合并的图片的路径
.pipe(sprite({
name: 'icon',
//定义一个名称
style: '_icon.scss',
//这是生成的样式文件
format: 'png',
//png格式的图片
orientation: 'left-right',
//雪碧图合并的方向，也可以设置成垂直或水平
cssPath: '#{$icon-sprite-path}',
//雪碧图的路径变量
template: './sprite-tpl.mustache',
//scss生成的模板
processor: 'scss'
//生成的样式文件的格式
.pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));
scss的模板使用mustache：
{{#items}}
${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};
{{/items}}
@mixin sprite-width($sprite) {
width: nth($sprite, 3);
@mixin sprite-height($sprite) {
height: nth($sprite, 4);
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 1);
$sprite-offset-y: nth($sprite, 2);
background-position: $sprite-offset-x
$sprite-offset-y;
@mixin sprite($sprite) {
@include sprite-position($sprite);
@include sprite-width($sprite);
@include sprite-height($sprite);
{{#sprite}}
{{class}} {
background-repeat: no-
background: url('{{{escaped_image}}}?v=#{$version}');
@include inline-block();
vertical-align:
font-style:
color:$icon-font-
{{/sprite}}
{{#items}}
.{{name}}{
@include sprite(${{name}});
{{/items}}
搞定！就是那么简单。
现在只需要把图片丢到icon文件夹里面，运行下gulp sprites，就可以生成一张雪碧图icon.png和相对应的scss样式文件_icon.scss了，也可以再新建一个监听的任务，监听icon文件夹，这样就可以实时生成了。
我把_icon.scss贴出来：
$icon-qq: -262px -161px 60px 60
$icon-email: -332px -161px 60px 60
$icon-skype: -5px -252px 60px 60
$icon-phone: -75px -252px 60px 60
@mixin sprite-width($sprite) {
width: nth($sprite, 3);
@mixin sprite-height($sprite) {
height: nth($sprite, 4);
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 1);
$sprite-offset-y: nth($sprite, 2);
background-position: $sprite-offset-x
$sprite-offset-y;
@mixin sprite($sprite) {
@include sprite-position($sprite);
@include sprite-width($sprite);
@include sprite-height($sprite);
background-repeat: no-
background: url('#{$icon-sprite-path}/icon.png?v=#{$version}');
@include inline-block();
vertical-align:
font-style:
color:$icon-font-
@include sprite($icon-qq);
.icon-email{
@include sprite($icon-email);
.icon-skype{
@include sprite($icon-skype);
.icon-phone{
@include sprite($icon-phone);
使用的时候只需要加上类似class="icon icon-qq"，就可以了。
现在作者已经没有更新css-sprite了，现在叫，配置差不多，sprity多了一些功能，有时间再介绍。
现在说下开头说的那个坑，就是安装的问题，微软的环境很难安装成功，因为依赖lwip，需要node-gyp重新编译，我自己的电脑安装好了，但是有些同事的电脑怎么配置都安装不成功。mac下还没有尝试，估计应该没什么问题，windows的环境比较操蛋。
如果你们也遇到安装的问题，能够解决的话，麻烦告知下啦。：）
6 收藏&&|&&62
你可能感兴趣的文章
3 收藏，758
9 收藏，3.5k
37 收藏，3.7k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
css预处理加雪碧图自动生成，很棒的方案
css预处理加雪碧图自动生成，很棒的方案
恩，不过我现在安装还遇到问题，如果有兴趣你也可以试下安装，看是否会出现我说的问题。：）
恩，不过我现在安装还遇到问题，如果有兴趣你也可以试下安装，看是否会出现我说的问题。：）
你是说 node-gyp 重编译的时候出现 configure error 的情况么？
你是说 node-gyp 重编译的时候出现 configure error 的情况么？
查了一下，似乎是编译器的问题。我这里因为安装的 python 3.4.3 ，gyp 不支持。我尝试改一下编译器
查了一下，似乎是编译器的问题。我这里因为安装的 python 3.4.3 ，gyp 不支持。我尝试改一下编译器
python 3.x应该不行，python 2.7才可以
python 3.x应该不行，python 2.7才可以
Windows 上看起来挺麻烦的，python、visual studio、windows sdk 都要保证OK。
Windows 上看起来挺麻烦的，python、visual studio、windows sdk 都要保证OK。
是啊，部署环境很累~
是啊，部署环境很累~
lwip@0.0.6 install /Users/jiandan/whitetea/node_modules/css-sprite/node_modules/lwipnode-gyp rebuild
xcode-select: note: no developer tools were found at '/Applications/Xcode.app', requesting install. Choose an option in the dialog to download the command line developer tools.
xcode-select: note: no developer tools were found at '/Applications/Xcode.app', requesting install. Choose an option in the dialog to download the command line developer tools.
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!gyp ERR! configure error gyp ERR! stack Error: gyp failed with exit code: 1gyp ERR! stack
at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:355:16)gyp ERR! stack
at emitTwo (events.js:87:13)gyp ERR! stack
at ChildProcess.emit (events.js:172:7)gyp ERR! stack
at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)gyp ERR! System Darwin 14.5.0gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"gyp ERR! cwd /Users/jiandan/whitetea/node_modules/css-sprite/node_modules/lwipgyp ERR! node -v v4.3.1gyp ERR! node-gyp -v v3.0.3gyp ERR! not ok npm ERR! Darwin 14.5.0npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "css-sprite"npm ERR! node v4.3.1npm ERR! npm
v2.14.12npm ERR! code ELIFECYCLE
npm ERR! lwip@0.0.6 install: node-gyp rebuildnpm ERR! Exit status 1npm ERR! npm ERR! Failed at the lwip@0.0.6 install script 'node-gyp rebuild'.npm ERR! This is most likely a problem with the lwip package,npm ERR! not with npm itself.npm ERR! Tell the author that this fails on your system:npm ERR!
node-gyp rebuildnpm ERR! You can get their info via:npm ERR!
npm owner ls lwipnpm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:npm ERR!
/Users/jiandan/whitetea/npm-debug.log
在mac中安装时遇到这些问题
& lwip@0.0.6 install /Users/jiandan/whitetea/node_modules/css-sprite/node_modules/lwip
& node-gyp rebuild
xcode-select: note: no developer tools were found at '/Applications/Xcode.app', requesting install. Choose an option in the dialog to download the command line developer tools.
xcode-select: note: no developer tools were found at '/Applications/Xcode.app', requesting install. Choose an option in the dialog to download the command line developer tools.
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack
at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:355:16)
gyp ERR! stack
at emitTwo (events.js:87:13)
gyp ERR! stack
at ChildProcess.emit (events.js:172:7)
gyp ERR! stack
at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 14.5.0
gyp ERR! command &/usr/local/bin/node& &/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js& &rebuild&
gyp ERR! cwd /Users/jiandan/whitetea/node_modules/css-sprite/node_modules/lwip
gyp ERR! node -v v4.3.1
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok
npm ERR! Darwin 14.5.0
npm ERR! argv &/usr/local/bin/node& &/usr/local/bin/npm& &install& &css-sprite&
npm ERR! node v4.3.1
npm ERR! npm
npm ERR! code ELIFECYCLE
npm ERR! lwip@0.0.6 install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! Failed at the lwip@0.0.6 install script 'node-gyp rebuild'.
npm ERR! This is most likely a problem with the lwip package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
node-gyp rebuild
npm ERR! You can get their info via:
npm owner ls lwip
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
/Users/jiandan/whitetea/npm-debug.log
在mac中安装时遇到这些问题
mac环境安装竟然也会。。。用sprity不要用css-sprite了
mac环境安装竟然也会。。。用`sprity`不要用`css-sprite`了
你看下 这篇文章吧，用sprity可以解决。
你看下/a/5988 这篇文章吧，用sprity可以解决。
sprity和css-sprite 有什么区别吗？我是在mac gulp 中运行下面命令
npm install css-sprite
sprity和css-sprite 有什么区别吗？我是在mac gulp 中运行下面命令
npm install css-sprite
css-sprite是旧版本，作者不再更新，sprity是新版本。
`css-sprite`是旧版本，作者不再更新，`sprity`是新版本。
试了 npm install sprity 也报错了Darwin 14.5.0npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "sprity"npm ERR! node v4.3.1npm ERR! npm
v2.14.12npm ERR! code ETIMEDOUTnpm ERR! errno ETIMEDOUTnpm ERR! syscall read
npm ERR! network read ETIMEDOUTnpm ERR! network This is most likely not a problem with npm itselfnpm ERR! network and is related to network connectivity.npm ERR! network In most cases you are behind a proxy or have bad network settings.npm ERR! network npm ERR! network If you are behind a proxy, please make sure that thenpm ERR! network 'proxy' config is set properly.
See: 'npm help config'
试了 npm install sprity 也报错了
Darwin 14.5.0
npm ERR! argv &/usr/local/bin/node& &/usr/local/bin/npm& &install& &sprity&
npm ERR! node v4.3.1
npm ERR! npm
npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! syscall read
npm ERR! network read ETIMEDOUT
npm ERR! network This is most likely not a problem with npm itself
npm ERR! network and is related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.
See: 'npm help config'
刚才sprity出错是网络超时了；重试了一次可以了；谢谢；
刚才sprity出错是网络超时了；重试了一次可以了；谢谢；
推荐使用-雪碧图制作专家V1.0来制作雪碧图
软件下载地址:网页雪碧图制作专家是一款辅助网页开发、快速合成雪碧图的实用型工具软件。网页雪碧图制作专家的界面非常简洁、操作方便、功能强大。可减轻广大Web程序员或网站网页设计爱好者制作雪碧图时的苦恼、愉快地享用CSS雪碧图网页开发技术。
推荐使用-雪碧图制作专家V1.0来制作雪碧图
软件下载地址:http://www.kittyapp.net/soft/CssSpritesMaker.rar
网页雪碧图制作专家是一款辅助网页开发、快速合成雪碧图的实用型工具软件。
网页雪碧图制作专家的界面非常简洁、操作方便、功能强大。
可减轻广大Web程序员或网站网页设计爱好者制作雪碧图时的苦恼、愉快地享用CSS雪碧图网页开发技术。
css-sprite安装确实巨坑，搞了环境也不行，还是用这个吧,
css-sprite安装确实巨坑，搞了环境也不行，还是用这个吧,//generating-sprites-with-gulp/
分享到微博？
我要该，理由是：
在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？百度拇指医生
&&&普通咨询
您的网络环境存在异常，
请输入验证码
验证码输入错误，请重新输入雪碧在6.6号停止生产了_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
雪碧在6.6号停止生产了
雪碧在6.6号停止生产了
我有更好的答案
不能这样残忍啊，我的雪碧军，我喜欢你比喜欢可乐军更多啊……
没有的事。谣言。事实证明。
停产了喝别的
为什么停产？
其他2条回答
为您推荐：
其他类似问题
雪碧的相关知识
换一换
回答问题，赢新手礼包