compass 制作精灵图

用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(小图标的名称);

还有很多的compass提供的精灵图辅助器我就不一一列举,上面的是比较常用的,

注意:所有的配置都是要在引入精灵图之前配置,否则无效或者报错;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值