在 vue 中使用stylus 完成雪碧图

最新推荐文章于 2025-05-14 15:05:05 发布

原创最新推荐文章于 2025-05-14 15:05:05 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #stylus #雪碧图

前端专栏收录该内容

77 篇文章

订阅专栏

本文介绍了一个使用Stylus预处理器结合Vue.js实现雪碧图的应用案例。通过迭代生成不同位置的图标，并利用Stylus特性优化CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近写一个小 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.5rem     
  display flex
  flex-wrap wrap
  background-color white
  border-radius 1rem
  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.25rem
        height 7.5rem
        overflow hidden
       //   使用静态链接的 地址，默认为 static 文件夹
        background url('/static/img/homexuebi.png')   
        background-position  (num2 - 1) * -7.5rem (num1) * -7.5rem
        background-size 33rem 22.5rem