SCSS条件引入逻辑不生效所有代码块均被执行如何排查？

问题核心原因 #

SCSS是预编译语言，所有SCSS变量运算、逻辑代码都会在编译生成CSS的阶段执行完成，不会等到浏览器运行CSS的时候根据元素属性匹配结果再执行。

你代码中的$margin是SCSS变量，仅在编译阶段生效，嵌套选择器的存在只是用来生成对应的CSS选择器，不会作为SCSS变量运算的判断条件。所以所有嵌套块内的$margin累加都会在编译时全部执行，最终生成的CSS中margin-right是固定的累加后的值，和元素实际属性无关。你写的代码编译后等价于以下CSS：

.test[data-active] {
  background: red;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 120px; /* 编译阶段直接计算为0+10+10+100的结果 */
}
.test[data-active][data-label] {
  background: blue;
}
.test[data-active][data-comment] {
  background: yellow;
}

这就是所有元素margin都不符合预期的原因。

修复方案 #

方案1：手动定义不同属性组合的margin规则 #

适合属性数量少、组合情况简单的场景，直接在对应属性选择器下声明margin值即可：

.test[data-active]{
  background : red;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 0;
  
  &[data-label]{
    background : blue;
    margin-right: 10px;
  }
  &[data-comment]{
    background: yellow;
    margin-right: 10px;
  }
  &[data-label][data-comment] {
    margin-right: 20px;
  }
  &[something]{
    margin-right: 100px;
  }
}

方案2：使用CSS原生自定义变量 #

适合属性多、组合复杂的场景，CSS自定义变量是运行时生效的，会根据选择器匹配结果动态叠加值，完全符合你最初想要的条件累加逻辑：

.test[data-active]{
  background : red;
  width: 50px;
  height: 50px;
  display: inline-block;
  --margin: 0px;
  margin-right: calc(var(--margin));
  
  &[data-label]{
    background : blue;
    --margin: calc(var(--margin) + 10px);
  }
  &[data-comment]{
    background: yellow;
    --margin: calc(var(--margin) + 10px);
  }
  &[something]{
    --margin: calc(var(--margin) + 100px);
  }
}

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