compass 制作精灵图
2015-04-24 23:06
155 查看
用compass快速制作精灵图
1.现在images文件夹新建一个文件夹装各种小图标,命名为Icon;
2.然后再sass文件加上这几句命令:
@import "compass/utilities/sprites" ; //导入compass精灵模块;
$Icon-spacing:5px; //设置生成的精灵图里面每个小图标的间距是5px;如果只是想设置某个图标的间距可以这样做:$装图标的文件夹名-要单独设置间距的那个文件的名字-spacing:5px;
$Icon-sprite-dimensions:true; //每个精灵图生成对应的类设置了宽度高度,数值等于精灵图的宽度高度;
$Icon-repeat:no-repeat/repeat-x; //设置精灵图是否重复,如果只是想设置其中一个可以这样,@Icon-小图标文件名-repeat:no-repeat/repeat-x;
$Icon-position:4px; //所有小图标向右移动4像素, 单个移动写法:$Icon-图标文件名-position:4px;
$Icon-layout:vertical/horizontal/diagonal/smart; //设置精灵图的布局,比如垂直/水平/倾斜/或者智能排列; 位置和重复性的设置对智能排列和对角斜线排列无效;
$Icon-clean-up:true/false; //生成新的精灵图时,compass会把旧的移除,如果设置为false则不会移除。
$Icon-sprite-height(图标的名字)/$Icon-sprite-width(图标的名字) //给一个特殊的精灵图设置尺寸,就是读取精灵图的大小;width:$Icon-sprite-width("icon1");这个第一死就是宽度等于icon1图标的宽度;
$icons-sprite-base-class:".Icon2"; 这里的.Icon2这个类就是新的基础类,会在每个生成的图标样式上起作用,比如,icon1,Icon2{overflow:hidden;}
$disable-magic-sprite-selectors:true/false; //这个功能默认是true的,主要就是会把 _hover _active _target这些命名的小图标会自动生成hover时候的样式,自动产生hover效果;比如icon1的hover图片命名应该是icon1_hover,这样生成的样式会有一个icon1:hover,对应的图片就是icon1_hover图标的样式;
$Icon:sprite-Icon("Icon/*.png",$layout:smart); 括号可以有多个参数,这里的意思是会创建一个智能布局的精灵图,而且把精灵地图的URL赋值给变量$Icon;
配合sprite辅助器,background:sprite($Icon,精灵名称) no-repeat;这样只是获取到背景属性,不会有多余的基础类出现。
@import "Icon/*.png"; //告诉compass更具Icon文件夹下面的png图片生成精灵图;
@include all-Icon-sprites;调用混合器生成每个精灵图的样式,如果要个别生成可以这样写,@include 装图标的文件夹名-sprite(小图标的名称);
1.现在images文件夹新建一个文件夹装各种小图标,命名为Icon;
2.然后再sass文件加上这几句命令:
@import "compass/utilities/sprites" ; //导入compass精灵模块;
$Icon-spacing:5px; //设置生成的精灵图里面每个小图标的间距是5px;如果只是想设置某个图标的间距可以这样做:$装图标的文件夹名-要单独设置间距的那个文件的名字-spacing:5px;
$Icon-sprite-dimensions:true; //每个精灵图生成对应的类设置了宽度高度,数值等于精灵图的宽度高度;
$Icon-repeat:no-repeat/repeat-x; //设置精灵图是否重复,如果只是想设置其中一个可以这样,@Icon-小图标文件名-repeat:no-repeat/repeat-x;
$Icon-position:4px; //所有小图标向右移动4像素, 单个移动写法:$Icon-图标文件名-position:4px;
$Icon-layout:vertical/horizontal/diagonal/smart; //设置精灵图的布局,比如垂直/水平/倾斜/或者智能排列; 位置和重复性的设置对智能排列和对角斜线排列无效;
$Icon-clean-up:true/false; //生成新的精灵图时,compass会把旧的移除,如果设置为false则不会移除。
$Icon-sprite-height(图标的名字)/$Icon-sprite-width(图标的名字) //给一个特殊的精灵图设置尺寸,就是读取精灵图的大小;width:$Icon-sprite-width("icon1");这个第一死就是宽度等于icon1图标的宽度;
$icons-sprite-base-class:".Icon2"; 这里的.Icon2这个类就是新的基础类,会在每个生成的图标样式上起作用,比如,icon1,Icon2{overflow:hidden;}
$disable-magic-sprite-selectors:true/false; //这个功能默认是true的,主要就是会把 _hover _active _target这些命名的小图标会自动生成hover时候的样式,自动产生hover效果;比如icon1的hover图片命名应该是icon1_hover,这样生成的样式会有一个icon1:hover,对应的图片就是icon1_hover图标的样式;
$Icon:sprite-Icon("Icon/*.png",$layout:smart); 括号可以有多个参数,这里的意思是会创建一个智能布局的精灵图,而且把精灵地图的URL赋值给变量$Icon;
配合sprite辅助器,background:sprite($Icon,精灵名称) no-repeat;这样只是获取到背景属性,不会有多余的基础类出现。
@import "Icon/*.png"; //告诉compass更具Icon文件夹下面的png图片生成精灵图;
@include all-Icon-sprites;调用混合器生成每个精灵图的样式,如果要个别生成可以这样写,@include 装图标的文件夹名-sprite(小图标的名称);
还有很多的compass提供的精灵图辅助器我就不一一列举,上面的是比较常用的,
注意:所有的配置都是要在引入精灵图之前配置,否则无效或者报错;
相关文章推荐
- (三)Sass和Compass--制作精灵图片
- 【iOS-Cocos2d游戏开发之二十】精灵的基础知识点总汇(位图操作/贴图更换/重排z轴等)以及利用CCSprite与CCLayerColor制作简单遮盖层!
- 制作纹理图集或者精灵表的利器 TexturePacker
- 按钮制作技巧(css精灵效果)-高级版
- 【iOS-Cocos2d游戏开发之二十】精灵的基础知识点总汇(位图操作/贴图更换/重排z轴等)及制作简单遮盖层!
- compass制作sprite雪碧图
- 可视化设计室real文件制作精灵 怎么用
- 【Cocos2D-X 游戏引擎】初窥门径(1) 制作一个动态的精灵
- 使用 2DToolkit 插件 制作2D精灵动画
- 【Cocos2D-X 游戏引擎】初窥门径(1) 制作一个动态的精灵
- 使用纹理制作特效 - 让精灵表单动起来
- 《 初学 》 html5 制作精灵表 坐标查看器
- Unity-3D捕鱼达人小游戏开发 —— 游戏中精灵动画的制作
- 雪碧图制作-Compass安装
- 灵活使用精灵可视区域(TextureRect)与锚点(anchorPoint),并结合可视区域与锚点制作进度条!
- cocos2d-x 利用精灵的可见区域制作字幕滚动效果
- 超级玛丽制作揭秘9精灵结构struct ROLE
- Unity3D游戏开发之在uGUI中使用不规则精灵制作按钮
- HTML版图像精灵制作工具
- 阿兰avg制作精灵测试版发布啦~