compass 制作精灵图

全栈程序员-站长 • 2022年5月3日下午10:00 • 未分类 • 阅读 42

大家好，又见面了，我是你们的朋友全栈君。

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