有没有办法使用 SCSS 来模拟以前的兄弟选择？

Question

我正在尝试更多地了解使用 SCSS 的创造性方法。我知道有人可能会使用 jQuery 来解决这个问题，但为了分离关注点，我想避免这条路线。

我有一个流动长度的元素列表（从 1 到 4 项长），其中一个我将分配一个类，例如“primary”。我正在使用 SCSS 为从 1 到 4 的列表长度生成选择器，如下所示：

@for $i from 1 through 4 {
  li:first-child:nth-last-child(#{$i}),
  li:first-child:nth-last-child(#{$i}) ~ li {
    width: 100% / #{$i}; 
      &.primary {
        transform: scale(1.35);
        background: red;
        z-index: #{$i};
      }
      &.primary + * {
        transform: scale(1.25);
        background: orange;
        z-index: #{$i - 1};
      }
      &.primary + * + * {
        transform: scale(1.15);
        background: yellow;
        z-index: #{$i - 2};
      }
  } 
} 

有没有办法使用 SCSS（我知道这在 CSS 目前是不可能的）来选择列表中 .primary 的下一个和上一个兄弟姐妹以使它们匹配？

看到这个demo for reference。在这种情况下，ITEM 2 是 .primary，ITEM 1 和 ITEM 3 分别是上一个和下一个兄弟。

感谢您的帮助。

Answer 1

如果您可以将班级分配给父母

就您提到的参数而言，Cimmanon 已给出正确答案。但是，您确实提到了两个可能产生解决方案的因素：

1. 您正在处理一小部分项目（最多四个）。
2. 您计划分配 primary 类给一个项目。

如果那个类加上了编号（如 primary-1），可以改为分配给父类 ol，那么你可以生成可以通过单个班级分配获得你想要的选择能力。示例 css 输出将如下所示 (view fiddle example here of all variations)：

.primary-1 > :nth-child(1),
.primary-2 > :nth-child(2),
.primary-3 > :nth-child(3),
.primary-4 > :nth-child(4) { 
   /* primary styles */   
}

.primary-1 > :nth-child(2),
.primary-2 > :nth-child(odd),
.primary-3 > :nth-child(even),
.primary-4 > :nth-child(3) { 
   /* immediately adjacent sibling styles */
}

.primary-1 > :nth-child(3),
.primary-2 > :nth-child(4),
.primary-3 > :nth-child(1),
.primary-4 > :nth-child(2) { 
   /* two removed sibling styles */
}

/* 3 removed sibling */
.primary-1 > :nth-child(4),
.primary-4 > :nth-child(1) { 
   /* three removed sibling styles */
}

SCSS 可以帮助构建它吗？可能，虽然由于组合的不同，并不像人们想的那么容易。

Answer 2

没有。因为 Sass 被编译成 CSS，它不知道你的文档的 DOM。为了让 Sass 能够完成您正在寻找的工作，它必须是 CSS 的一个函数。