如何在SCSS中编写基于动态变量的选择器实现用户ID匹配隐藏元素？

情况1：已知用户ID集合 #

如果提前知道所有可能的用户ID，可借助SCSS的@each循环结合选择器插值（#{}）批量生成样式，编译后的CSS能直接匹配目标场景：

// 定义所有可能的用户ID列表
$user-ids: 1 2 3;

@each $id in $user-ids {
  // 通过#{ }将变量插入选择器字符串中
  body.user-#{$id} {
    div.employee-#{$id} {
      display: none;
    }
  }
}

编译后的CSS输出：

body.user-1 div.employee-1 {
  display: none;
}

body.user-2 div.employee-2 {
  display: none;
}

body.user-3 div.employee-3 {
  display: none;
}

完全匹配你的需求：当<body class="user-2">时，div.employee-2会被自动隐藏。

情况2：动态未知用户ID #

由于SCSS是预编译工具，无法直接获取运行时动态生成的用户ID（比如前端渲染时动态添加的user-xxx类），此时可结合CSS变量+JavaScript实现：

1. 通过JS动态提取用户ID并设置CSS变量：

// 从body的class中提取用户ID
const userIdMatch = document.body.className.match(/user-(\d+)/);
if (userIdMatch) {
  document.body.style.setProperty('--user-id', userIdMatch[1]);
}

2. 在SCSS中通过属性选择器匹配对应元素：

body {
  div[class="employee-#{var(--user-id)}"] {
    display: none;
  }
}

如果不需要依赖SCSS，也可以直接用纯CSS属性选择器配合JS动态添加样式规则，避免预编译限制。

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