compass之sprite初接触

jsdt 发布于2019-08-28 17:51 / 3118人阅读

摘要：的就是让一个文件夹下的所有自动合并成一个临时的大图。所有必须是非交错的，否则会报没有属性的错误，非交错就是用保存的时候，会有的选项搜索了一天，发现没办法同时合并多个文件夹到一个图片上。

compass的sprite就是让一个文件夹下的所有icon自动合并成一个临时的大图。

所有icon必须是非交错的png，否则会报没有unpack属性的错误，非交错就是用ps保存png的时候，会有

的选项
搜索了一天，发现没办法同时合并多个文件夹到一个图片上。https://github.com/chriseppstein/compass/issues/800

基本设置
比如目前my-icons有4张图片
images/my-icons/new.png
images/my-icons/edit.png
images/my-icons/save.png
images/my-icons/delete.png
然后在scss文件中

@import "compass/utilities/sprites";
@import "my-icons/*.png";
@include all-my-icons-sprites;

就可以用.my-icons-delete使用delete的背景图片

或者可以用这种

@import "my-icons/*.png";

.actions {
  .new    { @include my-icons-sprite(new);    }
  .edit   { @include my-icons-sprite(edit);   }
  .save   { @include my-icons-sprite(save);   }
  .delete { @include my-icons-sprite(delete); }
}

这样看起来更舒服点

选项
- $-spacing合成图片之间的margin e.g $icon-spacing: 20px
- $-repeat背景图片的重复like $icon-repeat: repeat-x
- $-position背景定位，比如100%，就是把图片都往右边靠，宽度为最大的那张
- $-clean-up是否在每次创建新的图片时，删去旧的图片
- $-sprite-dimensions
$-sprite-base-class
$--spacing
$--repeat
$--position
没明白什么用

有组成方式的选项
选项必须放在该import前面
$[map]-layout属性有Vertical(default,竖着放),Horizontal(横着放),Diagonal(从右上到左下),Smart(紧凑)
e.g $[map]-layout:smart;会把图片都紧凑的压在一起，测试该选项会导致$-spacing失效

比如要给一个a加入4种状态时候的图片，e.g
icons:
my-buttons/glossy.png
my-buttons/glossy_hover.png
my-buttons/glossy_active.png
my-buttons/glossy_target.png

@import "my-buttons/*.png";

a {
  @include my-buttons-sprite(glossy)
}

a标签就自动获得4个状态的样式
要关闭这个功能在include前面加$disable-magic-sprite-selectors:true;

GPU云服务器云服务器 compass -sprite -sprites Sprites

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110846.html

使用compass自动合并css雪碧图(css sprite)

摘要：使用雪碧图，能够减少页面的请求数降低图片占用的字节，以此来达到提升页面访问速度的目的。也正是因为这一点，导致很多开发者懒于使用雪碧图。本文就介绍下怎样使用来自动合并雪碧图。生成的每个雪碧图默认的规则是目录名图片名。 css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。使用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。但...

刘永祥 2019-08-28 18:06 评论0 收藏0
Sass & Compass 初步使用

摘要：一需安装的东西自带可能被墙查看安装情况查看的可参考资料如何安装，使用镜像二实操使用终端进入选定的目录初始化编写针对可能用到的命令可能用到的命令针对进入到特定目录后，输入命令方式方式，会创建一个以命名的目录是目录的配置文件，可根据个人一、需安装的东西 ruby（mac自带） gem（sources可能被墙） sass compass 查看安装情况： ruby -v gem -v s...

boredream 2019-08-30 15:52 评论0 收藏0
Compass创建者Chris Eppstein：真正的CSS框架是如何工作的

摘要：当我的补丁被拒绝了之后，我想要指出一个方向真正的框架是如何工作的。发起这项捐助有我的个人原因在里面，我的父亲在年被确诊为患有一种罕见的成年人形式的线粒体疾病。正是一个经历了如此过程的产品。非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/article/120792 Chris Eppstein，Compass框架的创建...

BigTomato 2019-08-28 18:01 评论0 收藏0
postcss-lazysprite: 一种生成CSS 雪碧图的懒惰姿势

摘要：无论是早期工具，还是现在流行的配合这类构建工具而产生的雪碧图插件。本文原文链接：https://devework.com/postcss-...，转载请注明原始来源，谢谢！ showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其C...

BearyChat 2019-08-29 12:48 评论0 收藏0
写给初入门/半路出家的前端er

摘要：半路出家的前端程序员应该不在少数，我也是其中之一。年，冯冯同事兼师兄看我写太费劲，跟我说对面楼在找，问我要不要学，说出来可能有点丢人，但是在那之前，我真得不知道什么是，什么是。半路出家的前端程序员应该不在少数，我也是其中之一。为何会走向前端非计算机专业的我，毕业之后，就职于一家电力行业公司，做过设备调试、部门助理、测试，也写过一段时间的QT，那三年的时间，最难过的不是工作忙不忙，...

Cc_2011 2019-08-23 17:18 评论0 收藏0