SASS 中 CSS sprite 的实现技巧

阅读时长 4 分钟读完

什么是 CSS sprite?

CSS sprite 是指将多个小图标合并成一张大图,然后通过 CSS 设置背景位置和大小来显示需要的图标。这样做的好处是可以减少 HTTP 请求,提高页面加载速度,同时还可以减少图标文件的大小。

SASS 中实现 CSS sprite 的方法

SASS 是一种 CSS 预处理器,可以大大简化 CSS 的编写和维护。在 SASS 中,可以使用 mixin 和循环来实现 CSS sprite。

准备工作

假设我们有三个小图标,分别为 icon1.pngicon2.pngicon3.png,大小均为 16x16。

我们首先需要将这三个小图标合并成一张大图,可以使用 spritesmith 工具将它们合并,并生成对应的 CSS 文件。例如,使用以下命令:

其中,--padding=2 表示图标之间的间隔为 2 像素;--algorithm=left-right 表示图标的排列方式为从左往右;--engine=gm 表示使用 GraphicsMagick 引擎;--css-template=css.template.mustache 指定生成的 CSS 模板文件。

生成的大图和 CSS 文件如下所示:

-- -------------------- ---- -------
-- --------- --
------------ -
  ------ -----
  ------- -----
  -------------------- ---- -----
-
------------ -
  ------ -----
  ------- -----
  -------------------- ----- -----
-
------------ -
  ------ -----
  ------- -----
  -------------------- ----- -----
-
------ -
  ----------------- -----------------
-

使用 mixin 实现 CSS sprite

我们可以定义一个 mixin 来生成不同图标的样式,例如:

其中,$name 表示图标的名称,例如 icon1icon2icon3$position-#{$name} 表示该图标在大图中的位置,例如 -0px -0px-18px -0px-36px -0px

然后,我们可以在需要使用图标的地方调用这个 mixin,例如:

这样就会生成一个带有 icons-icon1 类名的 HTML 元素,并显示 icons.png 中第一个图标。

使用循环实现 CSS sprite

如果有很多小图标,手动一个一个地写 mixin 会很麻烦。这时,可以使用循环来生成 mixin。

这样就会生成三个带有 icons-icon1icons-icon2icons-icon3 类名的 HTML 元素,并显示对应的图标。

总结

使用 SASS 可以很方便地实现 CSS sprite,减少 HTTP 请求,提高页面加载速度。通过 mixin 和循环,代码的复用和维护也变得更加简单。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c24a4f83d39b488164c9bd

纠错
反馈