如何将HTML元素id值赋值给Sass变量配置计时器时长

这个需求无法通过原生Sass直接实现。
Sass是预编译语言，在项目构建阶段就会被编译成静态CSS文件，浏览器加载页面运行时，Sass早就完成编译退出流程了，根本没有读取HTML DOM节点id的能力，自然没法把DOM上的id值动态赋值给Sass变量。

根据你的场景选下面任意一种就行，都不需要折腾复杂的编译配置：

• 方案1：id和时长提前固定的场景，直接用Sass循环批量生成样式
  你写HTML的时候本身就已经确定了所有计时器的id和对应时长，完全不需要做「从HTML传值到Sass」这个操作，直接在Sass文件里统一维护一份计时器时长列表，通过循环自动生成所有对应规则即可：

  // 所有计时器的时长（和HTML里的id值一一对应）
  $timer-list: 130, 240, 15, 870, 640;
  
  @each $time in $timer-list {
    .example#{$time} {
      // 直接把值用在需要的属性上，比如动画/过渡时长
      animation-duration: #{$time}ms;
      // 需要给子元素、伪元素复用的话，也可以同步赋值给CSS自定义属性
      --timer-length: #{$time};
    }
  }
  

  编译后会自动生成每个id对应div的专属样式，不用手动重复写规则。
• 方案2：id动态生成/后续可能频繁改动的场景，用CSS自定义属性传值
  要是你的div是后端/JS动态渲染的，id值不是提前写死的，直接在HTML节点上把时长挂到内联CSS变量上就行，不管是原生CSS还是编译后的Sass都能直接读取这个值：

  <!-- 静态写的话直接加style，动态渲染的话在渲染逻辑里把id值填进去就行 -->
  <div class="example" id="130" style="--timer-length: 130ms">
  <div class="example" id="240" style="--timer-length: 240ms">
  <div class="example" id="15" style="--timer-length: 15ms">
  <div class="example" id="870" style="--timer-length: 870ms">
  <div class="example" id="640" style="--timer-length: 640ms">
  

  对应的Sass里直接调用变量即可，不需要单独给每个id写规则：

  .example {
    animation-duration: var(--timer-length);
  }
  

不推荐为了实现「Sass直接读HTML id」去搭额外的编译插件、做构建时的HTML内容解析，这类方案配置繁琐，后续改id还要同步调整编译逻辑，维护成本非常高，完全没有必要。

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