scss的高级用法——循环

周末愉快呀!一起来学一点简单但非常有用的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.mzph.cn/news/150821.shtml

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

相关文章

SASS/SCSS精华干货教程

目录 介绍 基本说明 特点 sass语法格式sass的语法格式一共有两种,一种是以".scss"作为拓展名,一种是以".sass"作为拓展名,这里我们只讲拓展名: 编译环境安装 Vscode安装编译插件 简单使用 sass语法扩张…

西南科技大学814考研一

C语言基础 字节大小 char:1 字节 unsigned char:1 字节 short:2 字节 unsigned short:2 字节 int:通常为 4 字节(32 位平台)或 8 字节(64 位平台) unsigned int&#x…

Sublime Text:代码编辑器的卓越典范

Sublime Text是一款高效、强大且灵活的代码编辑器,在开发社区中广受欢迎。它不仅提供了丰富的功能,还具备美观的界面和卓越的性能,成为了众多开发者的首选工具。 Sublime Text的优点 高性能:Sublime Text具有极高的启动速度和响…

数智赋能,众创众治|易知微为“浙江省数字监管应用建模技能竞赛”提供技术支撑!

11月6日至8日,2023年浙江省数字监管应用建模技能竞赛在省金华监狱举行。浙江省监狱管理局党委书记、局长王争,司法部监狱管理局规划科技处处长常家瑛,浙江省监狱管理局党委委员、副局长朱永忠出席本次活动。 本次建模大赛共有来自全省监狱系…

Genio 500_MT8385安卓核心板:功能强大且高效

Genio 500(MT8385)安卓核心板是一款功能强大且高效的AIoT平台,内置的AI处理器(APU)工作频率可达500MHz,支持深度学习、神经网络加速和计算机视觉应用。配合高达2500万像素的摄像头,可以为AI相机应用提供清晰、精确的图像,如人脸识…

有哪些相见恨晚的stm32学习的方法?

有哪些相见恨晚的stm32学习的方法? 单片机用处这么广,尤其是STM32生态这么火!如何快速上手学习呢? 你要考虑的是,要用STM32实现什么?为什么使用STM32而不是用8051?是因为51的频率太低&#xff…

NC Cloud uploadChunk文件上传漏洞复现

简介 NC Cloud是指用友公司推出的大型企业数字化平台。支持公有云、混合云、专属云的灵活部署模式。该产品uploadChunk文件存在任意文件上传漏洞。 漏洞复现 FOFA语法: app"用友-NC-Cloud" 访问页面如下所示: POC:/ncchr/pm/fb/…

2023年A特种设备相关管理(锅炉压力容器压力管道)证模拟考试题库及A特种设备相关管理(锅炉压力容器压力管道)理论考试试题

题库来源:安全生产模拟考试一点通公众号小程序 2023年A特种设备相关管理(锅炉压力容器压力管道)证模拟考试题库及A特种设备相关管理(锅炉压力容器压力管道)理论考试试题是由安全生产模拟考试一点通提供,A特…

STM32H743 RTC精密数字校准 深度剖析

一、问题 项目中数据报文收到的RTC时间总是会慢一些,经过实际几天的测试得出结论:24小时要慢5S左右。根据手册我了解到可以有误差但不会差这么多,所以进行了如下分析并解决问题。 二、分析 1.影响RTC准确性的因素罗列 硬件基础误差(也就是待校准部分) …

亚马逊,shopee,lazada自养号测评:提高店铺曝光,增加产品销量

如何在较短的时间内让自己的店铺排名升高,提高产品销量,除了依靠选品和广告之外,亚马逊测评 在店铺的运营中也是必不可少的环节。 自养号测评对亚马逊卖家来说,是运营店铺的重要手段之一。一个产品想要有更好的曝光、更高的转化率…

一个开源的汽修rbac后台管理系统项目,基于若依框架,实现了activiti工作流,附源码

文章目录 前言&源码项目参考图: e店邦O2O平台项目总结一、springboot1.1、springboot自动配置原理1.2、springboot优缺点1.3、springboot注解 二、rbac2.1、概括2.2、三个元素的理解 三、数据字典3.1、概括与作用3.2、怎么设计3.3、若依中使用字典 四、工作流—…

剪辑视频怎么把说话声音转成文字?

短视频已然成为了一种生活潮流,我们每天都在浏览各种短视频,或者用视频的形式记录生活,在制作视频的时候,字幕是一个很大的问题,给视频添加字幕可以更直观、更方便浏览。手动添加太费时间,下面就给大家分享…

使用VSCode调试全志R128的C906 RISC-V核心

使用 VSCode 调试 调试 XuanTie C906 核心 准备工具 T-Head DebugServer(CSkyDebugServer) - 搭建调试服务器 下载地址:T-Head DebugServer手册:T-Head Debugger Server User Guide驱动:cklink_dirvers VSCode - 开…

邮箱设置第三方登录授权码获取

以QQ邮箱为例 QQ邮箱设置——账户 开启POP3/SMTP服务——完成验证后获得授权码,保存授权码

吴恩达《机器学习》9-1-9-3:反向传播算法、反向传播算法的直观理解

一、正向传播的基础 在正向传播中,从神经网络的输入层开始,通过一层一层的计算,最终得到输出层的预测结果。这是一种前向的计算过程,即从输入到输出的传播。 二、反向传播算法概述 反向传播算法是为了计算代价函数相对于模型参数…

惠普打印机秋季新品震撼登场,以卓越品质赢得用户信赖,打造无限创新打印体验

北京,2023年11月20日 —— 今日, 2023惠普打印机秋季新品发布暨合作伙伴大会于北京举办。本次发布会以“品质 信赖,创新无界”为主题,惠普公司面向中国市场推出了四大系列、四十三款全新的打印产品,进一步丰富了其在细…

想做副业在哪里找?做好这些副业平台就够了

每个人在生活中都有一些额外的需求和理想,所以越来越多的人开始寻找副业来实现小目标。但是,但是寻找副业的过程并不容易,需要考虑到自己的时间和能力,还有选择一个靠谱的平台。其实,副业平台并不太难,只要…

2024年全网最全的Jmeter+ant+jenkins实现持续集成教程

jmeterantjenkins持续集成 一、下载并配置jmeter 首先下载jmeter工具,并配置好环境变量;参考:https://www.cnblogs.com/YouJeffrey/p/16029894.html jmeter默认保存的是.jtl格式的文件,要设置一下bin/jmeter.properties,文件内容…

八股文-TCP的四次挥手

TCP(Transmission Control Protocol)是一种面向连接的、可靠的传输协议,它的连接的建立和关闭过程都是经过精心设计的。在TCP连接关闭时,使用四次挥手来保证数据的完整传输和连接的正常终止。 漫画TCP的四次挥手 第一次挥手&#…

Linux下快速确定目标服务器支持哪些协议和密码套件

实现原理是利用TLS协议的特点和握手过程来进行测试和解析响应来确定目标服务器支持哪些TLS协议和密码套件。 在TLS握手过程中,客户端和服务器会协商并使用相同的TLS协议版本和密码套件来进行通信。通过发送特定的握手请求并分析响应,可以确定目标服务器…