如何在Sass或Less中使用可根据条件变化的动态变量？

核心结论 #

Sass和Less均支持编译阶段的条件动态变量，变量值可根据预设逻辑分支自动生成，但二者均为预编译语言，变量计算在打包阶段完成，无法直接实现页面运行时的动态变更。

Sass实现方案 #

Sass可通过@if/@else分支或三目运算符实现条件赋值，变量插入字符串需使用#{}插值语法，示例如下：

// 可通过打包工具传入环境标识，无需写死在代码中
$buildEnv: "prod";

// 条件动态赋值
$year: $buildEnv == "prod" ? "2024" : "2023";
// 复杂分支也可以用@if写法
// @if $buildEnv == "prod" {
//   $year: "2024";
// } @else if $buildEnv == "test" {
//   $year: "2023";
// } @else {
//   $year: "2021";
// }

.one {
  grid-area: one;
  background-image: url(/images/items/#{$year}/1.jpg);
}

Less实现方案 #

Less通过when关键字实现条件判断，变量插入字符串需使用@{}插值语法，示例如下：

@buildEnv: "prod";

// 条件动态赋值
@year: "2023";
@year: "2024" when (@buildEnv = "prod");

.one {
  grid-area: one;
  background-image: url(/images/items/@{year}/1.jpg);
}

运行时动态变更方案 #

如果需要页面加载后根据前端逻辑动态修改值，预编译器无法支持，可使用原生CSS自定义属性（CSS变量）配合JS实现：

:root {
  --year: "2021";
}
.one {
  grid-area: one;
  background-image: url(/images/items/var(--year)/1.jpg);
}

JS侧修改逻辑：

// 直接修改全局CSS变量值即可实时生效
document.documentElement.style.setProperty('--year', '2024');

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