在 vue 中使用stylus 完成雪碧图

最近写一个小 demo ，由于刚学了 stylus ，想着用上去，然后要写雪碧图到页面上，我就感觉机会来了

图是这样的，不要问我是从哪里截下来的，我知道有点不符合雪碧图的 规范，但是 who cares ╮(╯▽╰)╭

上代码

html:

< div class = " xuebi " >

< a href = " javascript:; " v-for = " i in 12 " :key = " i " >

< div class = " xuebiIcon " ></ div >

</ a >

</ div >

stylus:

< 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

具体效果当然就是这样了，其实和之前那个 雪碧图(伪) 差不多 。。。