开发者社区> 互联网fans> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

简介: demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
+关注继续查看

demo 源码 地址 https://github.com/qqqzhch/webfans

什么是雪碧图?

CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

compass 中为我们提供了简洁的工具和方法生成雪碧图

API 在这里 http://compass-style.org/reference/compass/utilities/sprites/

雪碧图 只须掌握最简单的 方法即可

可以参考这里的API

http://compass-style.org/reference/compass/helpers/sprites/

这里我们主要送 这个API

sprite-map($glob, ...)

 

首先 准备几张图片  png 的图片 制作雪碧图 推荐采用png图片

我们在图片目录下 建立Sprites 目录 这里放置那些需要合成的小缩略图

image

然后我们在sass目录下见一个 sass文件,用作制作雪碧图的基本配置

image

文件前加下划线 标志这是个小模块 不独立生成css文件

文件内容如下

@import "compass/utilities/sprites";
$sprite-default-margin:10px;
$my-icons-sprite: sprite-map("Sprites/*.png");

首先引入相关的库,然后是个设置每个小图标之间的距离,

最后是声明一个变量$my-icons-sprite 存储 图片映射sprite-map的结果

具体如何使用每个小图片呢?

代码如下

@import "compass/reset";
@import '_sprites.scss';
h1 {}

h2 {} 

.mytest {
    width: 200px;
    color: #eee;
}
.mying1{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a11') no-repeat;
}
.mying3{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a33') no-repeat;
}
.mying4{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a4444') no-repeat;
}
.mying5{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a555') no-repeat;
}

background: sprite($my-icons-sprite,'a555') no-repeat; 使用起来 还是计较简单的

这个例子生成的 demo如下

image

test

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
R 如何画图,图形参数、符号、线条和颜色| 学习笔记
快速学习 R 如何画图,图形参数、符号、线条和颜色
43 0
Writer 字符输出流|学习笔记
快速学习 Writer 字符输出流
30 0
【WPF】ImageMagick调节图片的颜色
原文:【WPF】ImageMagick调节图片的颜色 需求:打开一张图片后,自由调节图片的颜色(色调)。 思路:读取显示一张图片后,用ColorPicker取色器选择一种颜色,之后将图片的色调调节为该颜色。
1242 0
compass General 常用api学习[Sass和compass学习笔记]
compass 中一些常用api 包括一些浏览器hack @import "compass/utilities/general" Clearfix Clearfix 是用来清除浮动 float 造成的内容问题,以前用clear 方法可以解决,通过查看Clearfix 的源码发现对与高版本的浏览...
869 0
JDK5.0新特性系列---11.5.3线程 同步装置之CyclicBarrier
  import java.util.Random; import java.util.concurrent.CyclicBarrier;   /**  * CyclicBarrier维持一个计数器,与CountDownLatch不同的是,等待这个CyclicBarrier的线程必须等到计数器的某个值时,才可以继续.
732 0
+关注
互联网fans
迷失在大前端海洋中的孩子
172
文章
29
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载