如何将HTML整数值传递至SCSS并结合@if语句实现样式逻辑？

首先得明确一个核心限制：SCSS的@if是在编译阶段执行的，它没法获取到HTML里动态设置的属性值（比如你的givenValue）或者运行时的CSS变量——这些都是编译完成后才会存在的内容。所以直接用SCSS的@if来判断运行时的整数是行不通的，得换个思路：

方案1：用CSS原生的条件逻辑替代SCSS的@if #

既然SCSS的编译时逻辑用不了，咱们可以用CSS本身的运行时条件判断，配合自定义属性（CSS变量）来实现。步骤如下：

1. 在HTML里把givenValue转成CSS变量：

<div class="myClass" style="--given-value: -3">myText</div>
<!-- 注意：这里的数值必须是纯数字格式，比如-5、7这种 -->

2. 在SCSS（或纯CSS）里用calc()的三元表达式实现颜色判断：

.myClass {
  color: calc(var(--given-value) < 0 ? red : black);
}

这个方案完全在样式层处理，不需要JS或者模板逻辑，还支持动态变化的数值。唯一要注意的是浏览器兼容性：CSS的calc()支持三元表达式是较新的特性，现代浏览器基本都没问题，若要兼容旧版浏览器可能需要调整。

方案2：预编译SCSS类，配合HTML属性匹配（适合固定数值范围） #

如果你的givenValue是在固定的整数范围内（比如-10到10），可以用SCSS的循环预生成所有可能的样式，再用HTML的属性选择器匹配：

1. SCSS里用循环生成样式：

@for $i from -10 through 10 {
  .myClass[givenValue="#{$i}"] {
    @if $i < 0 {
      color: red;
    } @else {
      color: black;
    }
  }
}

编译后会生成类似.myClass[givenValue="-10"]、.myClass[givenValue="0"]等所有范围内的样式规则。

2. HTML里直接保留givenValue属性：

<div class="myClass" givenValue="-5">myText</div>

这个方案完全在编译阶段完成样式生成，运行时直接匹配属性，兼容性拉满。但缺点是只能覆盖你预定义的数值范围，超出范围的数值不会生效。

方案3：用JS动态同步属性值到类名（无模板逻辑） #

如果你不想用ngClass这种模板指令，但可以接受少量JS逻辑，能用JS动态把givenValue的数值转成对应类名：

1. SCSS里定义基础样式和条件类：

.myClass {
  color: black; // 默认样式
}
.myClass.given-value-negative {
  color: red;
}

2. 用JS初始化或监听属性变化：

// 初始化所有.myClass元素
document.querySelectorAll('.myClass').forEach(el => {
  const value = parseInt(el.getAttribute('givenValue'), 10);
  el.classList.toggle('given-value-negative', value < 0);
});

// 若属性会动态变化，监听属性变更事件
document.querySelectorAll('.myClass').forEach(el => {
  el.addEventListener('attributechange', (e) => {
    if (e.attributeName === 'givenValue') {
      const value = parseInt(el.getAttribute('givenValue'), 10);
      el.classList.toggle('given-value-negative', value < 0);
    }
  });
});

这个方案既保留了SCSS的清晰逻辑，又不需要在模板里写条件判断，适合需要处理动态变化数值的场景。

总结一下：如果是动态任意整数，优先用方案1；如果是固定范围的整数，方案2更高效；如果需要兼容旧浏览器或者更复杂的逻辑，方案3是不错的选择。

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