前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >compass 制作精灵图

compass 制作精灵图

作者头像
全栈程序员站长
发布2022-08-18 21:14:01
6300
发布2022-08-18 21:14:01
举报

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

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

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

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

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/135681.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年5月3,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 还有很多的compass提供的精灵图辅助器我就不一一列举,上面的是比较常用的,
  • 注意:所有的配置都是要在引入精灵图之前配置,否则无效或者报错;
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档