使用Bulma时能否根据上下文两次覆盖Sass变量取不同值？

纯靠Sass原生的变量机制实现不了你要的分上下文切换效果，不用在变量赋值这块死磕，原因和可行方案如下：

• Sass变量是编译阶段静态替换的，和CSS原生自定义属性（也就是常说的CSS变量）的运行时生效逻辑完全不一样。Bulma里$table-cell-border这类配置项，在编译框架样式的时候就会被替换成固定值写入最终生成的CSS文件，同一个变量在同一次编译流程里没法输出两套不同的值对应不同DOM上下文。
• 就算你在不同的scss代码块里反复给$table-cell-border赋0和1，最终编译结果只会按变量的作用域规则取对应的值，不会自动根据父级类名切换边框样式，反而容易出现样式覆盖混乱的问题。

方案1：对接CSS自定义属性（推荐，维护成本最低） #

你可以把这个Sass变量的值指向CSS自定义属性，之后只要在不同上下文的根节点上给CSS属性赋不同值，就能自动切换所有依赖这个变量的表格样式，不用逐个写覆盖规则：
首先在引入Bulma的配置文件里提前定义：

// 全局默认边框配置
:root {
  --table-cell-border-val: 1px solid hsl(var(--bulma-border-h), var(--bulma-border-s), var(--bulma-border-l));
}
// 把Sass变量指向CSS自定义属性
$table-cell-border: var(--table-cell-border-val);
// 之后再正常引入Bulma源码
@import "bulma/sass/bulma.sass";

配置完之后，你要的两类场景只要改对应上下文下的CSS变量值就行：

// 第一类：无边框表格的上下文
.ctx-table-no-border {
  --table-cell-border-val: 0;
}
// 第二类：有边框表格的上下文
.ctx-table-has-border {
  --table-cell-border-val: 1px solid hsl(var(--bulma-border-h), var(--bulma-border-s), var(--bulma-border-l));
}

所有Bulma原生的表格相关样式都会自动跟随上下文切换，后续如果Bulma升级改了表格边框的选择器，你也不用跟着改覆写代码。

方案2：直接覆写CSS样式（适合小范围快速实现） #

如果不想调整Bulma的编译配置，直接写CSS覆写是最省事的选择，不需要折腾变量逻辑：

// 如果默认全局用的是Bulma原生1px边框的配置，只要给无边框场景写覆写即可
.ctx-table-no-border .table {
  td, th {
    border: 0;
  }
}
// 如果你全局把$table-cell-border设成了0，再额外给有边框场景加规则
.ctx-table-has-border .table {
  td, th {
    border: 1px solid hsl(var(--bulma-border-h), var(--bulma-border-s), var(--bulma-border-l));
  }
}

小提示：覆写的时候尽量用和Bulma原生一致的边框颜色变量，避免出现主题色不统一的问题。

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