2025年compass 制作精灵图

编程汇总 • 2025-01-18 13:46 • 阅读 3

用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：

$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赋值给变量

配合sprite辅助器，background：sprite($Icon,精灵名称） no-repeat;这样只是获取到背景属性，不会有多余的基础类出现。

@import “Icon/*.png”; //告诉compass更具Icon文件夹下面的png图片生成精灵图；

@include all-Icon-sprites;调用混合器生成每个精灵图的样式，如果要个别生成可以这样写，@include 装图标的文件夹名-sprite(小图标的名称);

2025年compass 制作精灵图

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

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

2025年compass 制作精灵图

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

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

相关推荐