问答

如何使用scss根据不同图片生成不同样式类?

作者:admin 2021-04-20 我要评论

我有一个这样的问题,我的后台管理系统的菜单的icon是可以配置的,我的做法是把所有的icon图片放在某个文件夹下面,这些图片的名字分别是1.svg、2.svg、3.svg......

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

我有一个这样的问题,我的后台管理系统的菜单的icon是可以配置的,我的做法是把所有的icon图片放在某个文件夹下面,这些图片的名字分别是1.svg、2.svg、3.svg....以此类推,然后我在前端分别根据不同的图片写出不同的css类,类型下面的代码:


.icon-1 {
  background-image: url('../assets/pub/menu/1.svg');
  display: inline-block;
}

.icon-2 {
  background-image: url('../assets/pub/menu/2.svg');
  display: inline-block;
}

然后我让后端存菜单图标的时候就存css类名就可以了,到时候我就根据不同的类名显示不同的图标。

但是这样做的话,要自己一个个的去写一堆样式类,所以我想能不能用scss编程解决这个问题而不是我手动一个个的去写,能不能一次性把这个文件夹的图片引用,然后使用循环生成一堆这样有规律的样式类?

###
@for $i from 1 through 3 {
  .icon-#{$i} { 
    background-image: url('../assets/pub/menu/$i.svg');
  }
}

但是我估计循环多少个你不知道,建议直接写在页面上,比如

<div class="a" v-for="i in xx" :style="{backgroundImage: 'url(xxxx'+ i +')'}"/>
.a{display:inline-block}
###

scss for循环:https://www.sass.hk/docs/
ps: 可配置的怎么不是配icon的链接而是存类名?

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器