SCSS混合宏自定义内边距失效：基于JS设置的CSS变量动态指定方向问题

问题原因 #

你的混合宏失效是因为SCSS是预编译工具，在编译阶段就会处理@if判断逻辑，但var(--dir)是浏览器运行时才会解析的CSS变量。编译时$dir的值只是字符串"var(--dir)"，不是实际的"left"或"right"，所以@if $dir == "right"永远不成立，只会执行@else分支。

解决方案 #

方案1：用CSS运行时逻辑替代SCSS条件判断

把方向判断交给浏览器处理，通过CSS条件表达式结合自定义属性实现：

// 先定义--dir的类型，确保浏览器能正确识别字符串比较
@property --dir {
  syntax: "<string>";
  inherits: true;
  initial-value: "left";
}

@mixin custom-padding($value) {
  padding-left: calc(var(--dir) = "right" ? #{$value} : 0);
  padding-right: calc(var(--dir) = "left" ? #{$value} : 0);
}

JS依然按原逻辑设置变量：

// 设为left方向
document.documentElement.style.setProperty('--dir', 'left');
// 设为right方向
document.documentElement.style.setProperty('--dir', 'right');

浏览器会根据--dir的动态值自动生效对应的padding规则。

方案2：改用CSS逻辑属性，简化实现

如果可以调整JS的设置逻辑，把设置--dir变量改成设置根元素的dir属性（ltr/rtl），就能利用CSS逻辑属性自动适配方向：

@mixin custom-padding($value) {
  padding-inline-start: $value;
}

• 当根元素dir="ltr"（左到右排版）时，padding-inline-start等价于padding-left
• 当根元素dir="rtl"（右到左排版）时，等价于padding-right

JS只需修改根元素的dir属性：

// 设为left方向
document.documentElement.dir = 'ltr';
// 设为right方向
document.documentElement.dir = 'rtl';

这种方式更符合CSS规范，代码也更简洁。

方案3：用根元素的data属性配合SCSS选择器

如果坚持用自定义标识，可让JS设置根元素的data-dir属性，SCSS通过属性选择器生成对应样式：

@mixin custom-padding($value) {
  [data-dir="left"] & {
    padding-right: $value;
  }
  [data-dir="right"] & {
    padding-left: $value;
  }
}

JS设置方式：

// 设为left方向
document.documentElement.dataset.dir = 'left';
// 设为right方向
document.documentElement.dataset.dir = 'right';

SCSS编译时会生成两个静态选择器规则，浏览器运行时根据根元素的data-dir属性匹配生效。

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