1

我正在尝试更多地了解使用 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 的下一个和上一个兄弟姐妹以使它们匹配？

请参阅此演示以供参考。在这种情况下，ITEM 2 是 .primary，ITEM 1 和 ITEM 3 分别是上一个和下一个兄弟。

我很感激任何帮助。

4

2 回答 2

2

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

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

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

如果可以将带有附加数字（如 primary-1）的那个类分配给父类，那么您可以生成可以通过 单个类分配ol获得您想要的选择功能的 css 代码。示例 css 输出将是这样的（在此处查看所有变体的小提琴示例）：

.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 可以帮助构建它吗？可能，尽管由于各种组合，不像人们想的那样容易。

于 2013-05-02T13:51:26.377 回答
1

不，因为 Sass 被编译成 CSS，它不知道你的文档的 DOM。为了让 Sass 能够做你正在寻找的东西，它必须是 CSS 的一个功能。

于 2013-04-29T19:44:56.187 回答