scss的高级用法——循环

news2024/11/20 15:19:00

周末愉快呀!一起来学一点简单但非常有用的css小知识。

最近在一个项目中看到以下css class写法:

了解过tailwind css或者unocss的都知道,从命名就可以看出有以下样式:

  • font-size: 30px
  • margin-left: 5px;
  • margin-top: 10px;

于是我就去看它的package.json,竟然都没有使用。

难道是自己定义的?再在代码中全局搜索font30ml5,也都没有搜到。

于是我试着搜了一下mtml,搜到了这个:

这是scssfor循环语法,以前只稍微了解过,却从不知道有什么用。

看到这个,不禁感叹,实在是妙啊!

scss for循环有两种使用方式:

  1. @for $i from 开始值 through 结束值 包含结束值
  2. @for $i from 开始值 to 结束值 不包含结束值

以上代码使用了第一种,意思是从1循环到35,$i是每一项的值,1到35,通过#{$i}读取值并拼接class和属性值。分别定义了marginpadding上右下左四个方向的类样式

在playground中试试看:

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

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

相关文章

基于django水果蔬菜生鲜销售系统

基于django水果蔬菜生鲜销售系统 摘要 基于Django的水果蔬菜生鲜销售系统是一种利用Django框架开发的电子商务平台,旨在提供高效、便捷的购物体验,同时支持水果蔬菜生鲜产品的在线销售。该系统整合了用户管理、产品管理、购物车、订单管理等核心功能&…

云课五分钟-0ALinux文件系统及权限-查询命令如何使用

前篇: 云课五分钟-09Linux基础命令实践-AI助力快速入门 视频: 云课五分钟-0ALinux文件系统及权限-查询命令如何使用 文本: Linux文件系统及权限示例教程(Ubuntu) 一、Linux文件系统基础 在Linux中,一切…

windows nodejs 15.0.0下载安装

下载 Node v15.0.0 (Current) | Node.js (nodejs.org) 下载地址 https://nodejs.org/dist/v15.0.0/node-v15.0.0-x64.msi 安装 双击运行 等待安装完成 确认安装成功 管理员运行cmd 查看版本号

buildadmin+tp8表格操作(2)----表头上方按钮绑定事件处理,实现功能(全选/全不选)

buildAdmin 表格上方的按钮添加完成之后, 就要对其实现功能了 有了上面的说明, 我就只要得到了 ref 中的表格对象, 就可以象el-table 一样来操作表格的属性和方法了 我们来实现上面的几个按钮的方法 全选/全不选 上面就是添加按钮功能的全过…

Activiti,Apache camel,Netflex conductor对比,业务选型

Activiti,Apache camel,Netflex conductor对比,业务选型 1.activiti是审批流,主要应用于人->系统交互,典型应用场景:请假,离职等审批 详情可见【精选】activti实际使用_activiti通过事件监听器实现的优势_记录点滴…

某60区块链安全之重入漏洞实战记录

区块链安全 文章目录 区块链安全重入漏洞实战实验目的实验环境实验工具实验原理实验内容 重入漏洞实战 实验目的 学会使用python3的web3模块 学会以太坊重入漏洞分析及利用 实验环境 Ubuntu18.04操作机 实验工具 python3 实验原理 以太坊智能合约的特点之一是能够调用和…

搭建内部知识库,解决企业内部琐碎信息问题

企业内部面临着大量琐碎的信息,这些信息可能分散在各个部门、员工之间,导致查找和共享变得困难。这种情况下,搭建一个内部知识库可以解决这一问题。通过内部知识库,企业可以将琐碎的信息整理、分类,并提供一个集中存储…

在vmware中给linux添加硬盘

1.必须在断开linux电源的情况下,才能添加硬盘成功。注:自己好几次在开机状态下添加硬盘都失败了,然后关机后,又试了下,居然成功了。

【开源】基于Vue.js的开放实验室管理系统的设计和实现

项目编号: S 013 ,文末获取源码。 \color{red}{项目编号:S013,文末获取源码。} 项目编号:S013,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实…

机器视觉工程师吐槽的常见100个名场面

学了后发现真没用,只能越干越多 德创跑的快,苏映视裁的快,上帝说,要有光,我是凌云光。 这群里面有多少从德创跑路的 去年我辛辛苦苦干一年顶两年了,单双休变单休或者无休,节假日全部对半砍。加班…

「git 系列」git 如何存储代码的?

这里写自定义目录标题 git 文件存储位置git 数据模型示例分析分析前准备命令哈希值 具体示例 不同版本的提交,git 做了什么工作?snapshot vs delta-based vs backup参考资料 git 文件存储位置 想要了解如何存储,首先需要知道存储位置。 当我…

从智能到“致用”,安第斯大模型与潘塔纳尔系统的一次会师

为2023年的手机行业找一个关键词,“大模型”应该有很大概率当选。 国内手机厂商都纷纷宣布将大模型应用于手机。基于大模型的AI能力,成为手机市场新的价值增长点,也将主流厂商推向新的起跑线。 但这些复杂的算法和功能来到移动设备&#xff0…

【网络通信】探索UDP与TCP协议、IP地址和端口号的奥妙

🌺个人主页:Dawn黎明开始 🎀系列专栏:网络奇幻之旅 ⭐每日一句:往前走,朝着光 📢欢迎大家:关注🔍点赞👍评论📝收藏⭐️ 文章目录 📋前…

window系统vscode 编译wvp前端代码

下载代码 wvp-GB28181-pro: WEB VIDEO PLATFORM是一个基于GB28181-2016标准实现的网络视频平台,负责实现核心信令与设备管理后台部分,支持NAT穿透,支持海康、大华、宇视等品牌的IPC、NVR、DVR接入。支持国标级联,支持rtsp/rtmp等…

Java20新增特性

版本介绍 Java 20是在2023年3月21日发布的,发布公司是甲骨文。这是标准Java的最新升级,提供了一系列的新特性和改进,以帮助开发者更高效地编写和维护代码。 版本特性 以下是一些Java 20的新特性: 局部变量类型推断 &#xff1a…

趣学python编程 (三、计算机基础知识)

如果不了解些计算机的基础知识上来就编程,往往容易“不识庐山真面目,只缘身在此山中”。因此对于计算机的一些基础知识,在开始编程前,需要理解和掌握。 计算机软件系统 计算机软件是控制计算机实现用户需求的计算机操作以及管理计…

AIGC实战——卷积神经网络(Convolutional Neural Network, CNN)

AIGC实战——卷积神经网络 0. 前言1. 卷积神经网络1.1 卷积层1.2 叠加卷积层1.3 检查模型 2. 批归一化2.1 协变量漂移2.2 使用批归一化进行训练2.3 使用批归一化进行预测 3. Dropout4. 构建卷积神经网络小结系列链接 0. 前言 在深度学习一节中,我们使用 Keras 构建…

zsh和ohmyzsh安装指南+插件推荐

文章目录 1. 安装指南2. 插件配置指南3. 参考信息 1. 安装指南 1. 安装 zsh sudo apt install zsh2. 安装 Oh My Zsh 国内访问GitHub sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"这将安装 Oh My Zsh 和所…

比亚迪刀片电池与特斯拉4680电池比较

1 电池材料 比亚迪刀片电池采用的磷酸铁锂LFP(LiFePO4),特斯拉的4680电池采用的三元锂。 磷酸铁锂:循环寿命长,安全性能好,价格低廉,但是能量密度低,导电性能差,低温表现…

【作业】操作系统实验一:进程和线程

文章目录 实验内容一、进程的创建1、编辑源程序2、编辑结果3、编译和运行程序4、解释运行结果 二、进程共享1、运行2、解释运行结果 三、进程终止1、运行2、解释运行结果 四、进程同步1、运行2、解释运行结果 五、Linux中子进程映像的重新装入1、运行2、解释运行结果 六、线程1…