在css中如何用Sass循环生成类样式_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

在css中如何用Sass循环生成类样式

2025-10-12

浏览次数：次

返回列表

使用@for、@each和@while可批量生成CSS类；@for按数字范围生成如.margin-1到.margin-10；@each遍历颜色映射生成.text-success等类；@while通过条件控制循环生成间距类。

在css中如何用sass循环生成类样式

在 Sass 中，可以通过 @for、@each 和 @while 循环来批量生成类样式，特别适合用于创建具有规律命名的 CSS 类，比如栅格系统、间距工具类等。

使用 @for 生成数字类名

当你需要根据数字范围生成类名时，@for 是最常用的方式。例如，生成从 .margin-1 到 .margin-10 的类：

@for $i from 1 through 10 { .margin-#{$i} { margin: #{$i * 4}px; } }

编译后会生成类似：

.margin-1 { margin: 4px; } .margin-2 { margin: 8px; } /* ... */ .margin-10 { margin: 40px; }

使用 @each 遍历列表或映射

如果你有一组固定的值或键值对，@each 更合适。例如，为不同的颜色生成文本类：

$colors: ( success: green, error: red, warning: orange, info: blue );

@each $name, $color in $colors { .text-#{$name} { color: $color; } }

这将生成 .text-success、.text-error 等类。

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），包括边距、边框、填充、行高、背景颜色等。支持从右到左的语言，并自动检测文档中的RTL字符。转置表格、列表、文本