如何在SCSS中动态获取节点数量以自动调整环形布局？

首先要明确：SCSS是预编译样式语言，在编译阶段就会生成最终的CSS代码，无法在运行时获取HTML中实际的节点数量。你之前尝试的@for循环写法之所以返回10，是因为SCSS在编译时会为每个循环项生成对应的CSS规则，并不会在浏览器运行时去判断节点是否存在，所以$count最终会被累加10次。

要实现「修改HTML节点数量后自动适配布局」的需求，有两种可行方案：

方案一：使用CSS Grid的circle()布局（现代浏览器推荐） #

CSS Grid的circle()轨道函数可以直接将子元素排列在圆形轨道上，完全不需要预定义节点数量，自动适配HTML中的节点数：

.cluster {
  /* 容器大小对应原来的circle-size */
  width: 300px;
  height: 300px;
  display: grid;
  /* 将所有子元素放在同一个网格区域 */
  grid-template-areas: "circle";
  place-content: center;
  /* 定义圆形轨道 */
  grid-template-columns: circle(300px at center);
  grid-template-rows: circle(300px at center);
}

.node {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #1F1F1F;
  border: #137FE3 3px solid;
  /* 强制节点居中对齐轨道 */
  place-self: center;
  grid-area: circle;
}

这种方案无需额外的SCSS逻辑或JS代码，只要在HTML中添加/删除.node元素，布局会自动调整。

方案二：JS + CSS变量兼容旧浏览器 #

如果需要兼容不支持circle()的浏览器，可以通过JS获取节点数量并传递给CSS变量，结合动态计算实现环形排列：

1. JS代码（获取节点数量并设置变量） #

document.addEventListener('DOMContentLoaded', () => {
  const cluster = document.querySelector('.cluster');
  const nodes = cluster.querySelectorAll('.node');
  
  // 设置节点总数变量
  cluster.style.setProperty('--node-count', nodes.length);
  // 给每个节点设置索引变量
  nodes.forEach((node, idx) => {
    node.style.setProperty('--node-index', idx + 1);
  });
});

2. SCSS/CSS代码（用变量计算位置） #

.cluster {
  position: relative;
  width: 300px;
  height: 300px;
  /* 默认值，防止JS未加载时的降级显示 */
  --node-count: 6;
  --circle-size: 300px;
  --item-size: 100px;
  --half-circle: calc(var(--circle-size) / 2);
  --half-item: calc(var(--item-size) / 2);
}

.node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--item-size);
  height: var(--item-size);
  border-radius: 50%;
  background-color: #1F1F1F;
  border: #137FE3 3px solid;
  /* 通过CSS变量计算每个节点的旋转角度和偏移量 */
  transform: translate(-50%, -50%)
    rotate(calc((360deg / var(--node-count)) * (var(--node-index) - 1)))
    translate(calc(var(--half-circle) - var(--half-item)))
    rotate(calc(-((360deg / var(--node-count)) * (var(--node-index) - 1))));
}

这种方案通过JS将运行时的节点数量传递给CSS，再利用CSS的calc()动态计算每个节点的位置，实现了修改HTML即可调整布局的需求。

内容的提问来源于stack exchange，提问作者A. Vreeswijk