有没有办法使用SCSS来模拟以前的兄弟选择？ [英] Is there a way to use SCSS to emulate previous sibling selection?

问题描述

我想了解更多关于采用SCSS的创意方法。我知道有人可能会使用jQuery来解决这个问题，但为了分离的关注，我想避免这个路由。

I'm trying to learn more about creative ways to employ SCSS. I'm aware that one could potentially use jQuery to address this problem, but for the sake of separation of concerns, I'd like to avoid that route.

我有元素的流体长度列表（从1到4项长），其中一个我将分配类，如主要。我使用SCSS生成从1到4的列表长度的选择器，像这样：

I have a fluid length list of elements (from 1 to 4 items long), one of which I will assign a class such as "primary". I'm using SCSS to generate selectors for the list length from 1 to 4, like so:

@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};
      }
  } 
} 

strong> SCSS （我知道这是目前不可能的CSS）选择列表中的下一个和以前的兄弟姐妹.primary，以使他们匹配？

Is there a way using SCSS (I know this is currently impossible with CSS) to select both the next and previous siblings of .primary in the list to get them to match?

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

See this demo for reference. In this case, ITEM 2 is the .primary and ITEM 1 and ITEM 3 are previous and next siblings respectively.

我感谢任何帮助。

推荐答案

如果你可以将类分配给父类，而不是

Cimmanon给出了正确的答案，你提到的参数。但是，你提到了两个可能的解决方案：

If you can assign class to parent instead

Cimmanon has given the correct answer as far as your parameters you mentioned. However, you do mention two factors that might make a possible solution:

1. 你正在处理一小部分项目


2. 您计划将主类分配给一个项目。

如果具有添加号码的类（例如 primary-1 ）可以分配给父 ol ，那么您可以生成可以获得选择功能的CSS代码想通过单个类分配。示例css输出如下所示（ 查看所有变体 >）：

If that class with an added number (like primary-1), can be assigned instead to the parent ol, then you can generate css code that can get the selection capabilities that you want through a single class assignment. A sample css output would be like this (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 */
}

$ b b

SCSS能帮助建立这个吗？很可能，虽然因为各种组合，不像人们所想的那么容易。

Could SCSS help in building this? Probably, though because of the various combinations, not as easily as one might like.

这篇关于有没有办法使用SCSS来模拟以前的兄弟选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！