Css 在变量中存储匹配 Select 器的子元素的计数

以您所描述的方式存储动态变量在CSS中不起作用.

相反，对于另一种解决方案，this answer描述了如何将具有特定数量子项的元素的子项作为目标.从本质上讲:

div:first-child:nth-last-child(#{$item-count}),
div:first-child:nth-last-child(#{$item-count}) ~ div {
    /* ... */;
}

将以恰好包含$item-count个子元素的元素的直接子元素的所有div为目标.

这可以适用于你的情况.然后，您可以为 node 计数的每个排列生成最大值的规则.每条规则将包含特定于 node 数的略微不同的Angular ，从而允许创建与所显示的 node 数完全对应的变换:

.node {
    $maximum: 20;
    $circle-size: 300px;
    $item-size: 100px;
    
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    width:  $item-size;
    height: $item-size;
    border-radius: 50%;
    background-color: #1F1F1F;
    border: #137FE3 3px solid;
    margin: -($item-size / 2);
    
    @for $item-count from 1 through $maximum {
        $angle: (360 /  $item-count);
        $rot: 0;
        
        &:first-child:nth-last-child(#{$item-count}),
        &:first-child:nth-last-child(#{$item-count}) ~ div {
            @for $i from 1 through $item-count {
                &:nth-of-type(#{$i}) {
                    transform: 
                        rotate($rot * 1deg) 
                        translate($circle-size / 2) 
                        rotate($rot * -1deg);
                }
                $rot: $rot + $angle;
            }
        }
    }
}

在HTML中添加或删除 node (最多20个)将导致自动重新计算旋转，以便 node 保持在一个圆圈中.

Here is a codepen个在Sass中实现这一点的人.