基于less和scss 循环生成css

news2025/1/11 22:46:57

效果
在这里插入图片描述
一、less代码
在这里插入图片描述
复制代码

  @item-count: 12; // 生成多少个 .item 类

  .item-loop(@n) when (@n > 0) {
    .icon@{n} {
      background: url('../../assets/images/menu/icon@{n}.png') no-repeat;
      background-size: 100% 100%;
    }

    .item-loop(@n - 1);
  }

  .item-loop(@item-count);

二、scss代码

 @for $i from 1 through 12 {
  .icon#{$i} {
    background: url('../../assets/images/menu/icon#{$i}.png') no-repeat;
    background-size: 100% 100%;
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2137825.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在线查看 Android 系统源代码 Android Code Search

在线查看 Android 系统源代码 Android Code Search 1. Android Code Search2. Android2.1. platform/superproject2.2. build/envsetup.sh2.3. build/make/envsetup.sh References 1. Android Code Search https://cs.android.com/ Android https://cs.android.com/android An…

PCIe进阶之TL:Address Spaces, Transaction Types, and Usage

1 Transaction Layer Overview 如上图为PCIe设备的一个分层结构,从上层逻辑看,事务层的关键点是: 流水线式的完整的 split-transaction 协议事务层数据包(TLP)的排序和处理基于信用的流控制机制可选支持的数据中毒功能和端到端数据完整性检测功能事务层包含以下内容: TLP…

【C++】标准库IO查漏补缺

【C】标准库 IO 查漏补缺 文章目录 系统I/O1. 概述2. cout 与 cerr3. cerr 和 clog4. 缓冲区5. 与 printf 的比较 系统I/O 1. 概述 标准库提供的 IO 接口,包含在 iostream 文件中 输入流: cin输出流:cout / cerr / clog。 输入流只有一个 cin&#x…

MFC工控项目实例之十六输入信号验证

承接专栏《MFC工控项目实例之十五定时刷新PC6325A模拟量输入》 验证选定的输入信号实时状态 在BoardTest.cpp文件中添加代码 void CBoardTest::OnButton2() {// TODO: Add your control notification handler code hereisThreadBegin true; //运行线程执行pThre…

medium_socnet

0x00前言 靶场要安装在virtualbox (最新版)。否者会出现一些问题。 攻击机:kali2024 靶机:medium_socnet 0x01信息搜集 因为把靶机和虚拟机啊放在了同一网段。 所以我先使用了 arp-scan,查看有多少同一网段ipUP 。 经过推断…

OSS对象资源管理

1、登录aliyun 1.1、什么是OSS?有什么用? OSS 是“Object Storage Service”的缩写,中文常称为“对象存储服务”。OSS 是一种互联网云存储服务,主要用于海量数据的存储与管理。 相较于nginx,OSS更灵活,不…

点云深度学习系列:Sam2Point——基于提示的点云分割

文章:SAM2POINT:Segment Any 3D as Videos in Zero-shot and Promptable Manners 代码:https://github.com/ZiyuGuo99/SAM2Point Demo:https://huggingface.co/spaces/ZiyuG/SAM2Point 1)摘要 文章介绍了SAM2POINT,这是…

跟《经济学人》学英文:2024年09月14日这期 People are splurging like never before on their pets

People are splurging like never before on their pets Would you buy your furry companion a cologne? like never before:从未有过;未曾发生过 splurge:挥霍;浪费;破费;大量花费;过度消…

python 读取excel数据存储到mysql

一、安装依赖 pip install mysql-connector-python 二、mysql添加表students CREATE TABLE students (ID int(11) NOT NULL AUTO_INCREMENT,Name varchar(50) DEFAULT NULL,Sex varchar(50) DEFAULT NULL,PRIMARY KEY (ID) ) ENGINEInnoDB AUTO_INCREMENT13 DEFAULT CHARSETu…

S32K3 工具篇5:如何使用lauterbach下载调试elf文件

S32K3 工具篇5:如何使用lauterbach下载调试elf文件 一,利用trace32现有flash脚本烧录elf二,debug 现有elf文件 之前写过如何在S32DS中使用lauterbach下载,但是对于RTD EB MCAL的代码,通常情况下是使用命令的方式去编译…

Spring Boot母婴商城:安全、便捷、高效

2 相关技术 2.1 SSM框架介绍 本课题程序开发使用到的框架技术,英文名称缩写是SSM,在JavaWeb开发中使用的流行框架有SSH、SSM、SpringMVC等,作为一个课题程序采用SSH框架也可以,SSM框架也可以,SpringMVC也可以。SSH框架…

C语言 | Leetcode C语言题解之第399题除法求值

题目: 题解: /*** Note: The returned array must be malloced, assume caller calls free().*/typedef struct hash_node_t {char *key;double val;int distinguish_flag; // 用于区分不同的关系struct hash_node_t *p_next; }HASH_NODE_T;typedef str…

clip论文阅读(Learning Transferable Visual Models From Natural Language Supervision)

目录 摘要训练pre-train model的过程将pre-train model应用于下游任务应用(待更新) 论文/项目地址:https://github.com/OpenAI/CLIP 提供了clip的pre-trained model的权重,也可安装使用pre-trained model 摘要 使用标签标注的图…

【IEEEACM Fellow、CCF组委】第三届人工智能与智能信息处理国际学术会议(AIIIP 2024)

第三届人工智能与智能信息处理国际学术会议(AIIIP 2024) 2024 3rd International Conference on Artificial Intelligence and Intelligent Information Processing 中国-天津 | 2024年10月25-27日 | 会议官网:www.aiiip.net 会…

【CTF MISC】XCTF GFSJ1086 [简单] 简单的base编码 Writeup(Base64编码+循环解码+Base92编码)

[简单] 简单的base编码 你懂base编码吗? 工具 在线BASE92编码解码:https://ctf.bugku.com/tool/base92 解法 Vm0wd2QyUXlVWGxWV0d4V1YwZDRWMVl3WkRSV01WbDNXa1JTVjAxV2JETlhhMUpUVmpBeFYySkVUbGhoTVVwVVZtcEJlRll5U2tWVWJHaG9UVlZ3VlZadGNFSmxSbGw1V…

数据集 wider person 户外密集行人检测 >> DataBall

数据集 wider person 用于野外密集行人检测的多样化数据集 行人检测 目标检测 户外密集行人检测的多样化数据集 WiderPerson: A Diverse Dataset for Dense Pedestrian Detection in the Wild article{zhang2019widerperson, Author {Zhang, Shifeng and Xie, Yiliang and Wa…

蛋白质结构变换中的四元数和旋转矩阵介绍

在蛋白质结构变换中,四元数和旋转矩阵都是用来描述旋转的重要工具。 一、旋转矩阵 定义与形式: 旋转矩阵是一个 33 的矩阵,用于将一个向量在三维空间中进行旋转操作。它可以表示为:其中,每个元素都是实数,且满足一定的正交性条件,即旋转矩阵的逆等于它的转置。作用原理…

Stanley算法原理

Stanley Controller与Pure Pursuit算法类似,其同样是基于几何追踪的轨迹跟踪控制器,但是与Pure Pursuit不同的是,Stanley Controller算法基于前轮中心点为参考点进行控制,没有预瞄距离,以前轮中心点与最近参考轨迹点进…

『功能项目』切换职业面板【48】

我们打开上一篇47技能冷却蒙版的项目, 本章要做的事情是切换职业UI面板的功能 首先双击打开Canvas预制体在左上主角面板信息中新建一个button按钮 重命名(父物体是按钮Button,子物体Image即可) 创建一个Image 设计一下布局 复制三…

每日学习一个数据结构-B+树

文章目录 什么是B树示意图B树的基本特点B树的优点B树的应用场 B树分裂和合并的机制节点分裂节点合并注意事项 什么是B树 B树是一种自平衡的树数据结构,广泛应用于数据库和操作系统的索引结构中,特别是在MySQL的InnoDB存储引擎中。它通过保持数据排序&am…