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
相关文章
|
2月前
|
移动开发 前端开发 JavaScript
学习Particles.js 给网页来点粒子特效
学习Particles.js 给网页来点粒子特效
89 0
|
3月前
|
前端开发
css图标合并——ClipPath Sprites技术
css图标合并——ClipPath Sprites技术
37 1
|
Ruby
雪碧图制作-Compass安装
雪碧图制作-Compass安装
105 0
|
前端开发
零基础CSS入门教程(13)——边框样式
可以通过border-style设置边框样式,常用的有solid实线、dotted点线、dashed虚线三种。大家想必发现了,我们在设定边框样式时,一般都会同时设定边框样式、宽度、颜色,如果逐一定义,比较麻烦。我们前几个小结学习了有序列表无序列表,我们这一小节学习一下边框样式很重要的一个知识点。我们本小节学习了边框样式,内容有点多,大家要学会熟练使用,我们在开发中很常用。可以通过border-width调整边框的宽度,单位一般使用px像素。可以使用bolder-color指定边框的颜色,
零基础CSS入门教程(13)——边框样式
|
前端开发
「趣学前端」filter滤镜,CSS的PS特技
CSS之filter赏析,来show一波CSS的PS特技。
150 1
|
前端开发
零基础CSS入门教程(9)——背景颜色和背景图片
我们在images文件夹下放置一张图片,然后通过background-image来设置背景图。本小结我们学习了背景图片设置,背景颜色的设置,这两个设置再css里面很常用,我们要熟练掌握。如果觉得背景色不够好看,还可以找一张图片作为背景图,就想我们电脑或者手机的壁纸一般。我们前几小节学习了如何设置字体格式,我们这一小节学习一下如何设置背景颜色和图片。
零基础CSS入门教程(9)——背景颜色和背景图片
|
前端开发
零基础CSS入门教程(8)——CSS设置字体
我们前几个小结学习了,css的选择器,和及基本的改变字体颜色。我们这一小结学习一下设置字体的一些功能(1)font-size这个是设置字体大小,浏览器一般默认字体是16px (2)font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold (3)font-style是设置字体倾斜和html字体倾斜一样效果,倾斜写italic,不倾斜写normal (4)font-family可以设置字体形式 在后面加sans-serif是无衬线字体写这个墓地为了
零基础CSS入门教程(8)——CSS设置字体
|
前端开发
零基础CSS入门教程(10)——背景图片平铺不平铺
如果是repeat他会分成四块一样的也是默认平铺,repeat-x平行平铺两个,repeat-y上下平铺两个,而no-repeat他是取消平铺,只显示一个*/如果是repeat他会分成四块一样的也是默认平铺,repeat-x平行平铺两个,repeat-y上下平铺两个,而no-repeat他是取消平铺,只显示一个。什么叫平铺呢,就是图像在窗口上是如何铺设的,是横向一张一张的铺,还是不平铺只展示一张图片,还是纵向的一张一张的铺。我们本小节学习了图片的平铺和不平铺,我们以后对图片设置花样多了许多方法。
零基础CSS入门教程(10)——背景图片平铺不平铺
|
前端开发
零基础CSS入门教程(2)——CSS如何应用
上一篇介绍了CSS的作用,就是用来设置网页的样式的。本篇就用一个最基础的入门实例,来展示下CSS是如何将样式应用到网页上好的,现在我们想将绿色这个样式应用到上面的第一个标签,也就是下面这段代码上。 那么如何应用呢,其实可以通过HTML的style属性来实现。也就是说,style属性的值就是我们要编写的CSS代码部分。通过style属性,我们可以将CSS样式代码应用到指定的标签上。看下面的代码,我们给p标签设置了style样式,style属性的值color:aquamarine;就是CSS代码 效果如下 从上
零基础CSS入门教程(2)——CSS如何应用
|
前端开发
零基础CSS入门教程(1)——认识css
我们这一下小节认识一下css,什么是css,css是干什么的。CSS是层叠样式表的简称,有时可以称为CSS样式表或者级联样式表,也是一种标记语言,主要用于设置HTML页面中的文本内容,图片的外形或者版面的布局以及外观样式,可以称为网页美容师。 CSS最大价值:由HTML专注去做结构呈现,样式由CSS来完成,即结构(HTML)和样式(CSS)相分离CSS规则由两个主要的部分组成:选择器以及一条或多条声明(通俗理解为:选择器即为给谁改样式,多条声明为改成什么样式) 一般将CSS写在中,将HTML写在中,这样就
零基础CSS入门教程(1)——认识css