scss的高级用法——循环

news/2024/12/29 16:44:13/

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

相关文章

Python 自动化: eip、cen监控数据对接到 grafana

新钛云服已累计为您分享775篇技术干货 概览 日常运维中,我们有时需要关注阿里云中 EIP 和 CEN 的监控数据,如果每次登录到平台查看,不太方便。 可以通过 API 获取监控数据,并输入到 influxDB,然后再到 Grafana 中展示&…

基于供需算法优化概率神经网络PNN的分类预测 - 附代码

基于供需算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于供需算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于供需优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要:针对PNN神经网络的光滑…

数据库索引详解

数据库索引是一种用于提高数据库查询性能的关键技术。索引是一种数据结构,可以加速数据库中数据的检索过程。在本文中,我们将详细讨论数据库索引的定义、类型、优缺点以及如何选择和优化索引。 1. 什么是数据库索引? 数据库索引是一种数据结…

在VS Code中使用VIM

文章目录 安装和基本使用设置 安装和基本使用 VIM是VS Code的强大对手,其简化版本VI是Linux内置的文本编辑器,堪称VS Code问世之前最流行的编辑器,也是VS Code问世之后,我仍在使用的编辑器。 对VIM无法割舍的原因有二&#xff0…

算法设计与分析 | 众数问题(c语言)

题目 所谓众数,就是对于给定的含有N个元素的多重集合,每个元素在S中出现次数最多的成为该元素的重数, 多重集合S重的重数最大的元素成为众数。例如:S{1,2,2,2,3,5},则多重集S的众数是2,其重数为3。 现在你…

python项目源码基于django的宿舍管理系统dormitory+mysql数据库文件

基于Django的宿舍管理系统 运行效果 个人亲自制作python项目源码基于django的宿舍管理系统dormitorymysql数据库文件 1. 介绍 宿舍管理系统是一个基于Django框架开发的项目,旨在简化和优化宿舍管理的流程。该系统包括学生和管理员两个角色,学生可以通过…

vite+vue3+electron开发环境搭建

环境 node 18.14.2 yarn 1.22 项目创建 yarn create vite test01安装vue环境 cd test01 yarn yarn dev说明vue环境搭建成功 安装electron # 因为有的版本会报错所以指定了版本 yarn add electron26.1.0 -D安装vite-plugin-electron yarn add -D vite-plugin-electron根目…

科罗廖夫年谱

1906年(1907年1月12日),科罗廖夫生于乌克兰日托米尔(Жито́мир)。因父母婚姻破裂,他童年的大部分时光是在外公外婆的家中度过的。 后在飞机设计师图波列夫领导的飞机工厂半工半读完成中学和高等专科…