能否在CSS中使用类模板语法实现自定义内边距样式？

很遗憾，原生CSS并没有你想要的这种“类模板”语法——没办法仅通过写 padding-x { padding: x px; } 就自动匹配 padding-5、padding-10 这类类名，并把类名里的数字作为 padding 的数值应用。不过有几种成熟的方法可以实现类似效果，下面给你拆解：

1. 用CSS预处理器自动生成类（最常用方案） #

如果你项目里在用Sass、Less或者Stylus这类预处理器，写个循环就能批量生成你需要的所有 padding-x 类，完全不用手动一个个写。比如用Sass的话：

@for $i from 1 through 30 { // 可按需调整数字范围，比如1到30
  .padding-#{$i} {
    padding: #{$i}px;
  }
}

编译之后，CSS里就会自动生成 .padding-1 到 .padding-30 的所有类，直接用修正后的HTML结构 <p class="padding-5">Padding 5</p> 就行（注：你原来的HTML里漏写了 class= 属性，正确写法需要加上哦）。

2. 原生CSS配合自定义属性（无需预处理器） #

如果不想依赖预处理器，可以用CSS自定义属性（变量）来实现类似效果，只是HTML结构要稍微调整：

<p style="--padding: 5">Padding 5</p>
<p style="--padding: 10">Padding 10</p>

然后在CSS里写：

[style*="--padding"] {
  padding: calc(var(--padding) * 1px);
}

这样就能把自定义属性里的数字转成px单位的padding值。如果还是想保留类名的写法，那得配合一点JavaScript：遍历页面元素，检查类名里是否包含 padding- 前缀，提取数字后给元素设置样式。比如：

document.querySelectorAll('[class*="padding-"]').forEach(el => {
  const matchResult = el.className.match(/padding-(\d+)/);
  if (matchResult) {
    const paddingValue = matchResult[1];
    el.style.padding = `${paddingValue}px`;
  }
});

3. 用原子化CSS框架（开箱即用） #

像Tailwind CSS这类原子化框架本身就内置了大量这类原子类，比如默认的 p-5 对应 padding: 1.25rem，你可以通过配置把单位改成px，直接用 <p class="p-5">Padding 5</p> 就能实现效果，完全不用自己写模板，框架已经帮你生成了所有需要的样式类。

总结一下：原生CSS没法直接实现你想要的类模板语法，但上面这几种方法都能达到类似的效果，选哪种取决于你的项目技术栈和需求~

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