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给出了正确的答案。但是，您确实提到了可能成为可能解决方案的两个因素：

您正在处理一小部分项目（最多四个）。
您计划将分配 primary课程分配给一个项目。

如果具有附加编号的类（例如 primary-1 ）可以分配给父 ol，那么您可以生成通过单个类分配可以获得所需选择功能的css代码。示例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的功能。

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

2 个答案:

如果您可以将课程分配给父课程