最近写一个小 demo ，由于刚学了 stylus ，想着用上去，然后要写雪碧图到页面上，我就感觉机会来了
图是这样的，不要问我是从哪里截下来的，我知道有点不符合雪碧图的 规范，但是 who cares ╮(╯▽╰)╭
上代码
html:
<
div
class
=
"
xuebi
"
>
<
a
href
=
"
javascript:;
"
v-for
=
"
i
in
12
"
:key
=
"
i
"
>
<
div
class
=
"
xuebiIcon
"
></
div
>
</
a
>
</
div
>
<
style
lang=
"
stylus
"
>
.xuebi
position
relative
// 这里用了 rem 感觉和 stylus 中的全局变量差不多，但是原生，默认是 1rem = 12px
top
13.5
rem
display
flex
flex-wrap
wrap
background-color
white
border-radius
1
rem
overflow
hidden
// 使用 迭代，和 js 的 for循环差不多，就是数组什么的变成了 0 1 2
for
num1
in
0
1
2
for num2
in
1
2
3
4
// {} 使用了 插值，这样能在原有的里面插入自己的值
a
:
nth-of-type
(
{num1
*
4
+
num2 }
)
.xuebiIcon
width
8.25
rem
height
7.5
rem
overflow
hidden
// 使用静态链接的 地址，默认为 static 文件夹
background
url
(
'/static/img/homexuebi.png'
)
background-position
(num2
-
1
)
*
-7.5
rem
(num1)
*
-7.5
rem
background-size
33
rem
22.5
rem
具体效果当然就是这样了，其实和之前那个 雪碧图(伪) 差不多 。。。