scss for循环,$变量,全局样式

$fonWeight: 这段代码是一个 SCSS(Sassy CSS)代码片段,用于生成一系列字体加粗的类。让我解释一下其中的含义:

  1. $fonWeight:这是一个变量,包含了一系列字体加粗的值。它包括数字(100 到 900)、关键字(bold 和 bolder),这些值用于控制文本的粗细。

  2. @for $i from 1 through length($fonWeight) { ... }:这是一个 SCSS 循环,会迭代$fonWeight变量中的每个值。

  3. 生成一系列类,类名包含了字体加粗的值。例如,对于每个字体加粗值,会生成如下类:

    • .fontWeight100:对应字体加粗值为 100 的类。
    • .fontWeight200:对应字体加粗值为 200 的类。
    • .fontWeight300:对应字体加粗值为 300 的类。
    • .fontWeight400:对应字体加粗值为 400 的类。
    • .fontWeight500:对应字体加粗值为 500 的类。
    • .fontWeight600:对应字体加粗值为 600 的类。
    • .fontWeight700:对应字体加粗值为 700 的类。
    • .fontWeight800:对应字体加粗值为 800 的类。
    • .fontWeight900:对应字体加粗值为 900 的类。
    • .fontWeightbold:对应字体加粗值为 bold 的类。
    • .fontWeightbolder:对应字体加粗值为 bolder 的类。

通过这些类,可以轻松地在 HTML 元素中设置不同粗细的字体。

/* 边距 */
$boxSize: 0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60;@for $i from 1 through length($boxSize) {$size_: 0;@if nth($boxSize, $i) !=0 {$size_: calc(nth($boxSize, $i) * 1px);}// padding.common-p-#{nth($boxSize, $i)} {padding: $size_;}.common-p-tb-#{nth($boxSize, $i)} {padding-top: $size_;padding-bottom: $size_;}.common-p-lr-#{nth($boxSize, $i)} {padding-left: $size_;padding-right: $size_;}.common-p-l-#{nth($boxSize, $i)} {padding-left: $size_;}.common-p-b-#{nth($boxSize, $i)} {padding-bottom: $size_;}.common-p-r-#{nth($boxSize, $i)} {padding-right: $size_;}.common-p-t-#{nth($boxSize, $i)} {padding-top: $size_;}/* margin */.common-m-#{nth($boxSize, $i)} {margin: $size_;}.common-m-tb-#{nth($boxSize, $i)} {margin-top: $size_;margin-bottom: $size_;}.common-m-lr-#{nth($boxSize, $i)} {margin-left: $size_;margin-right: $size_;}.common-m-l-#{nth($boxSize, $i)} {margin-left: $size_;}.common-m-b-#{nth($boxSize, $i)} {margin-bottom: $size_;}.common-m-r-#{nth($boxSize, $i)} {margin-right: $size_;}.common-m-t-#{nth($boxSize, $i)} {margin-top: $size_;}
}/* 文字大小 */
$fontSize: 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40;@for $j from 1 through length($fontSize) {.fontSize#{nth($fontSize, $j)} {font-size: calc(nth($fontSize, $j) * 1px);}
}/* 字体加粗 */
$fonWeight: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder;@for $i from 1 through length($fonWeight) {.fontWeight#{nth($fonWeight, $i)} {font-weight: nth($fonWeight, $i);}
}
.fontWeight000 {font-weight: normal;
}
/* img 大小 方形 */
@for $i from 1 through 160 {.common-img-#{$i} {display: block;width: calc($i * 1px);height: calc($i * 1px);}
}/* 圆角 */
@for $i from 1 through 49 {.common-radius-#{$i} {border-radius: calc($i * 1px);}
}.common-radius--50 {border-radius: 50%;
}/* 修改滚动条 */
$scrollSize: 2, 4, 6, 8, 12;// $scrollBackground: 2, 4, 6, 8;
@for $j from 1 through length($scrollSize) {$size: calc(nth($scrollSize, $j) / 2);.common-scroll-#{nth($scrollSize, $j)} {&::-webkit-scrollbar {width: calc(nth($scrollSize, $j) * 1px);height: calc(nth($scrollSize, $j) * 1px);background-color: transparent;border-radius: calc($size * 1px);}&::-webkit-scrollbar-track {border-radius: calc($size * 1px);background-color: transparent;}&::-webkit-scrollbar-thumb {background-color: #cacdd1;border-radius: calc($size * 1px);}&::-webkit-scrollbar-thumb:hover {background-color: #a5a5a5;}}
}/* 带点* */
$spot: red, black, blue;@for $j from 1 through length($spot) {.spot-#{"" + nth($spot, $j)} {position: relative;&::before {position: absolute;content: '*';color: nth($spot, $j);top: 0;left: 0;}}}$sizeColor: #4e86ef, #999999, #faad14, #ff4d4d, #808080, #222222, #333333, #ffffff, #f3c14c;
$sizeName: 'primary', 'info', 'warning', 'danger', '808080', '222', '333', 'ffffff', f3c14c;@for $i from 1 through length($sizeColor) {.color-#{nth($sizeName, $i)} {color: nth($sizeColor, $i);}.back-#{nth($sizeName, $i)} {background-color: nth($sizeColor, $i);}}.common-height {height: fit-content;
}.common-width {width: fit-content;
}// 
.common-column {display: flex;flex-direction: column;
}.common-a-c-between {display: flex;align-content: space-between;
}.common-a-center {display: flex;align-items: center;
}.common-wrap {flex-wrap: wrap;
}.common-a-start {display: flex;align-content: flex-start;
}.common-a-baseline {display: flex;align-items: baseline;
}.common-aj-center {display: flex;align-items: center;justify-content: center;
}.common-j-center {display: flex;justify-content: center;
}.common-j-between {display: flex;justify-content: space-between;
}.common-j-around {display: flex;justify-content: space-around;
}.common-j-evenly {display: flex;justify-content: space-evenly;
}.common-ac-jbet {display: flex;align-items: center;justify-content: space-between;
}
.common-auto {overflow: auto;
}$clamp: 1, 2, 3, 4, 5, 6;@for $i from 1 through length($clamp) {.common-clamp-#{nth($clamp, $i)} {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: nth($clamp, $i);overflow: hidden;text-overflow: ellipsis;}
}.init-aBASE-jB {display: flex;align-items: baseline;justify-content: space-between;
}
.word-wrap {white-space: pre-wrap;
}.word-nowrap {white-space: nowrap
}.disabled {user-select: none;
}.common-dailog-f5 {.crop-dialog {background: #F5F5F5;.crop-dialog__header {// border-bottom: 1px solid #e5e5e5;font-size: 16px !important;font-weight: bold;color: #333333;}.crop-dialog__body {border-top: 1px solid #e5e5e5;}}
}.common-dailog-white .crop-dialog {background: #fff;.crop-dialog__header {// border-bottom: 1px solid #e5e5e5;font-size: 16px !important;font-weight: bold;color: #333333;}.crop-dialog__body {border-top: 1px solid #f3f4f6;}
}.common-dailog-white.common-dailog-whiteHeader .crop-dialog {.crop-dialog__header {background: #fff;}
}.common-dailog-padding-0 .crop-dialog {.crop-dialog__body {padding: 0;}
}$fonWeight: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder;@for $i from 1 through length($fonWeight) {.common-dailog-white.common-dailog-header#{nth($fonWeight, $i)} .crop-dialog {.crop-dialog__header {font-weight: nth($fonWeight, $i);}}
}// 无定义边距 ***
@for $a from 1 through 100 {.init-p-#{$a} {padding-left: calc($a * 1px);padding-right: calc($a * 1px);padding-top: calc($a * 1px);padding-bottom: calc($a * 1px);}.init-p-lr-#{$a} {padding-left: calc($a * 1px);padding-right: calc($a * 1px);}.init-p-tb-#{$a} {padding-top: calc($a * 1px);padding-bottom: calc($a * 1px);}.init-p-t-#{$a} {padding-top: calc($a * 1px);}.init-p-b-#{$a} {padding-bottom: calc($a * 1px);}.init-p-l-#{$a} {padding-left: calc($a * 1px);}.init-p-r-#{$a} {padding-right: calc($a * 1px);}// margin.init-m-#{$a} {margin-left: calc($a * 1px);margin-right: calc($a * 1px);margin-top: calc($a * 1px);margin-bottom: calc($a * 1px);}.init-m-lr-#{$a} {margin-left: calc($a * 1px);margin-right: calc($a * 1px);}.init-m-tb-#{$a} {margin-top: calc($a * 1px);margin-bottom: calc($a * 1px);}.init-m-t-#{$a} {margin-top: calc($a * 1px);}.init-m-b-#{$a} {margin-bottom: calc($a * 1px);}.init-m-l-#{$a} {margin-left: calc($a * 1px);}.init-m-r-#{$a} {margin-right: calc($a * 1px);}
}.fontColor {color: var(--color);
}

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

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

相关文章

【开发工具】Git模拟多人开发场景理解分支管理和远程仓库操作

我们来模拟一个多人多分支的开发场景。假设你有一个新的空白远程仓库,假设地址是 https://github.com/user/repo.git。 克隆远程仓库到本地 $ git clone https://github.com/user/repo.git这会在本地创建一个 repo 目录,并自动设置远程主机为 origin。 创建本地开发分支并推送…

学术论文GPT的源码解读与二次开发:从ChatPaper到gpt_academic

前言 本文的前两个部分最早是属于此旧文的《学术论文GPT的源码解读与微调:从ChatPaper到七月论文审稿GPT第1版》,但为了每一篇文章各自的内容更好的呈现,于是我今天做了以下三个改动 原来属于mamba第五部分的「Mamba近似工作之线性Transfor…

开源模型应用落地-工具使用篇-Spring AI(七)

一、前言 在AI大模型百花齐放的时代,很多人都对新兴技术充满了热情,都想尝试一下。但是,实际上要入门AI技术的门槛非常高。除了需要高端设备,还需要面临复杂的部署和安装过程,这让很多人望而却步。不过,随着…

如何在安装 UOS 桌面版的笔记本电脑中实现光盘自动挂载?

操作系统支持现状 插入光盘后,操作系统能够检测到并在桌面文件管理程序窗口中增加光盘图标,需要手动点击光盘图标才能够挂载。 网上的方法 修改 /etc/fstab 文件 https://www.linuxquestions.org/questions/linux-newbie-8/automount-dvd-rom-when-d…

容量控制(Capacity Control)

容量控制(Capacity Control)是机器学习和深度学习中一项重要的概念,它涉及到调整模型的能力,使其既能够从训练数据中学习规律,又能够良好地泛化到新的、未见过的数据上。模型的“容量”指的是其拟合各种函数的能力。一…

Kap - macOS 开源录屏工具

文章目录 关于 Kap 关于 Kap Kap 是一个使用web技术的开源的屏幕录制工具 官网:https://getkap.cogithub : https://github.com/wulkano/Kap 目前只支持 macOS 12 以上,支持 Intel 和 Apple silicon 你可以前往官网,右上方下载 你也可以使…

案例介绍:信息抽取技术在汽车销售与分销策略中的应用与实践

一、引言 在当今竞争激烈的汽车制造业中,成功的销售策略、市场营销和分销网络的构建是确保品牌立足市场的关键。作为一名经验丰富的项目经理,我曾领导一个专注于汽车销售和分销的项目,该项目深入挖掘市场数据,运用先进的信息抽取…

EasyExcel3.1.1版本上传文件忽略列头大小写

1、背景 项目中使用easyExcel3.1.1版本实现上传下载功能,相关数据DTO以 ExcelProperty(value "dealer_gssn_id") 形式规定其每一列的名称,这样的话easyExcel会完全匹配对应的列名,即用户上传文件时,列名写成Dealer_…

利用websocket +定时器简易的实现一个网络聊天室

其实原理非常简单,就是客户端用户通过websoket来连接websocket服务端。然后服务端,收集每个用户发出的消息, 进而将每条用户的消息通过广播的形式推送到每个连接到服务端的客户端。从而实现用户的实时聊天。 // TODO : 我主要是讲一下实现思路。并未完善其功能。 1.后端 依赖 …

Java面试(2)之 多线程

线程池的结构及原理 一, 线程池的参数: corePoolSize: 线程池核心线程大小; 默认情况下这些线程不会被销毁,除非设置了allowCoreThreadTimeOut maximumPoolSize: 线程池最大线程数量 keepAliveTime: 空闲线程存活时间 TimeUnit: 空闲线程存活时间及单位 workQueue: 工作队…

使用数据库实现增删改查

#include<myhead.h>//定义添加数据函数int do_add(sqlite3 *ppDb) {//1.准备sql语句,输入要添加的信息int add_numb; //工号char add_name[20]; //姓名char add_sex[10]; //性别double add_score; //工资printf("请输入要添加的工号:")…

mysql数据库创建与删除

可以使用show databases语句来查看当前所有存在的数据库。 mysql> show databases; Database ---------- information_schema mysql performance_schema sys其中&#xff0c;mysql用来描述用户访问权限。 创建数据库 创建数据库可以使用create database命令。 例如&#…

恢复IDEA误删除的git提交,提交被删除,尝试恢复提交

​​​​​​ dgqDESKTOP-JRQ5NMD MINGW64 /f/IdeaProjects/workspace/spzx-parent ((8bb112e...)) $ git reflog 8bb112e (HEAD, origin/master, master) HEAD{0}: checkout: moving from master to 8bb112e5ac18dfe4bbd64adfd06363e46b609f21 8bb112e (HEAD, origin/master, …

微信小程序开发系列(二十一)·wxml语法·setData()修改数组类型数据(增加、修改、删除)

目录 1. 新增数组元素 方法一&#xff1a;push&#xff08;&#xff09; 方法二&#xff1a;concat() 方法三&#xff1a;ES6中的扩展运算符 ... 2. 修改数组元素 样式一&#xff1a;数字 样式二&#xff1a;元素 3. 删除数组元素 方法一&#xff1a;splice&#x…

vue2源码分析-vue入口文件global-api分析

文章背景 vue项目开发过程中,首先会有一个初始化的流程,以及我们会使用到很多全局的api,如 this.$set this.$delete this.$nextTick,以及初始化方法extend,initUse, initMixin , initExtend, initAssetRegisters 等等那它们是怎么实现,让我们一起来探究下吧 源码目录 global-…

Windows下 OracleXE_21 数据库的下载与安装

Oracle 数据库的下载与安装 数据库安装包下载数据库安装访问数据库进行测试Navicat连接数据库 1. 数据库安装包的下载 1.1 下载地址 Oracle Database Express Edition | Oracle 中国 1.2 点击“下载 Oracle Database XE”按钮&#xff0c;进去到下载页面&#xff08;选择对…

Stable diffusion零基础课程

该课程专为零基础学习者设计&#xff0c;旨在介绍和解释稳定扩散的基本概念。学员将通过简单易懂的方式了解扩散现象、数学模型及其应用&#xff0c;为日后更深入的科学研究和工程应用打下坚实基础。 课程大小&#xff1a;3.8G 课程下载&#xff1a;https://download.csdn.ne…

灵魂指针,教给(一)

欢迎来到白刘的领域 Miracle_86.-CSDN博客 系列专栏 C语言知识 先赞后看&#xff0c;已成习惯 创作不易&#xff0c;多多支持&#xff01; 一、内存和地址 1.1 内存 在介绍知识之前&#xff0c;先来想一个生活中的小栗子&#xff1a; 假如把你放在一个有100间屋子的酒店…

第三讲 汇编初步 课程随手记

一、寄存器 32位CPU通用寄存器如下图所示&#xff1a; 因为教材依照的是32位CPU寄存器&#xff0c;而我安装的是64位寄存器&#xff0c;所以找了一下64位的寄存器的资料 PS&#xff1a;一般来说&#xff0c;Intel处理器字节存储顺序为小端法存储&#xff0c;是指数据的高字节保…

基于Skywalking开发分布式监控(四)一个案例

上一篇我们简单介绍了基于SkyWalking自定义增强的基本架构&#xff0c;即通过把Trace数据导入数据加工模块进行加工&#xff0c;进行持久化&#xff0c;并赋能grafana展示。 现在我们给出一个例子&#xff0c;对于量化交易系统&#xff0c;市场交易订单提交&#xff0c;该订单…