SASS中能否通过类传递参数？实现动态缩进类需求

当然可以搞定！针对你想要的「通过类名传递数值生成动态缩进」的需求，我有两个实用的Sass方案，既不用手写一堆重复的类，又能满足JS动态生成类的灵活性～

方案1：用Sass循环预生成类（简单直接，覆盖常用数值） #

如果你的缩进数值范围是可控的（比如0到20，完全覆盖你说的4级以内+额外场景），用Sass的@for循环可以自动生成所有需要的类，一行重复代码都不用手动写：

// 你可以调整循环范围，比如from 0 through 20，覆盖0到20的所有数值
@for $i from 0 through 20 {
  .indent-me-#{$i} {
    text-indent: $i * 2.5em;
  }
}

编译后的CSS会自动生成.indent-me-0到.indent-me-20的所有类，每个类对应正确的缩进值（比如.indent-me-10就会有text-indent: 25em）。JS生成的类只要在这个范围内，就能直接生效，完全不用额外处理。

方案2：CSS变量+JS配合（完全灵活，支持任意数值） #

如果需要支持任意数值（比如JS可能生成超大数值的类），这个方案更合适，完全不受范围限制：

首先写极简的Sass代码：

// 匹配所有包含indent-me-的类
[class*="indent-me-"] {
  text-indent: calc(var(--indent-num) * 2.5em);
}

然后在JS生成类的时候，顺便把数值存入CSS变量：

// 示例：给目标元素添加indent-me-10类，并设置对应的数值变量
const targetElement = document.querySelector('.your-element');
const indentNum = 10; // 这个数值可以是JS逻辑生成的任意数
targetElement.classList.add(`indent-me-${indentNum}`);
targetElement.style.setProperty('--indent-num', indentNum);

这样不管indentNum是多少，都能自动计算出对应的缩进值，完全灵活，也不用预生成任何类。

选哪个方案？ #

• 优先选方案1：如果你的数值范围不大（比如0到20），编译后的CSS体积小，使用起来最省心，不需要JS额外处理；
• 选方案2：如果需要支持完全任意的数值，或者数值范围非常大，这个方案能完美覆盖所有情况。

内容的提问来源于stack exchange，提问作者dannymcgee