基于单个容器中的兄弟姐妹数量来调整元素大小SCSS [英] Sizing elements based on the number of siblings in a single container SCSS

问题描述

我有这个例子：

 < div class =container> 
< div class =item-1>< / div> 
< div class =item-2>< / div> 
< div class =item-2>< / div> 
< div class =item-2>< / div> 
< div class =item-3>< / div> 
< div class =item-3>< / div> 
< / div> 
  

...而item-＃可以高达48.我想要做的是目标每个唯一的.item-＃并给它不同的颜色。

我试过在SCSS中玩这个：

  @for $ i从1到48 {
 .item  - ＃{$ i} {
&：nth-​​child（1）：nth-​​last-child（2），
& nth-child（2）：nth-​​last-child（1）{
 color：red; } 
} 
} 
  

...但它没有工作。我在这里找到了一个类似的解决方案： CSS可以检测数字的孩子一个元素有吗？，但区别是我需要所有的.item-＃包装在一个容器中。

以避免使用JavaScript。

解决方案

CSS不能根据匹配相同的兄弟元素数量来匹配元素选择器。请参见我可以合并：第n -child（）或：nth-​​of-type（）与任意选择器？

同时没有纯CSS解决方法。

---

选择器4的：nth-​​child（S的An + B）符号将会提供这个能力（令人讨厌的是，还没有：only-child（）的等价函数符号），但是你仍然需要知道选择器 S 。这是您的SCSS将派上用场的地方：

  @for $ i从1到48 {
：nth-​​child （1 .item  - ＃{$ i}）：nth-​​last-child（.item  - ＃{$ i}）中的1个{
 //样式
} 
} $ b令人惊讶的是，尽管Selectors 4仍然是一个不稳定的草稿，除Safari之外没有人实现了这个扩展名<$ 

c $ c>：nth-​​child（）然而，这将与当前版本的Sass正确编译。当然，因为它没有实现，它实际上不工作。不过，很高兴知道我们可以在将来这样做（假设Safari的实现保持，每个人都适合）。

I have this example:

<div class="container">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-2"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
    <div class="item-3"></div>
</div>

... and the item-# could be as high as 48. What I want to do is target each unique .item-# and give it a different color.

I tried playing around with this in SCSS:

@for $i from 1 through 48 {
    .item-#{$i} { 
       &:nth-child(1):nth-last-child(2),
       &:nth-child(2):nth-last-child(1) { 
            color: red; } 
       }
}

... but it didn't work. I found a similar solution here: Can CSS detect the number of children an element has?, but the difference is that I need all .item-# to be wrapped in a single container.

I'd like to avoid using JavaScript.

解决方案

CSS does not provide the ability to match an element based on the number of siblings that match the same selector. See Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

There are no pure CSS workarounds in the meantime.

---

Selectors 4's :nth-child(An+B of S) notation will provide this ability (annoyingly, there is no equivalent functional notation for :only-child() yet), but you still have to know the selector S in advance. That's where your SCSS will come in handy:

@for $i from 1 through 48 {
    :nth-child(1 of .item-#{$i}):nth-last-child(1 of .item-#{$i}) {
        // Styles
    }
}

Surprisingly, although Selectors 4 is still an unstable draft and no one aside from Safari has implemented this extension to :nth-child() yet, this will compile correctly with the current version of Sass. Of course, since it's not implemented, it's not actually going to work. Still, it's nice to know we'll be able to do this in the future (assuming Safari's implementation stays and everyone follows suit).

这篇关于基于单个容器中的兄弟姐妹数量来调整元素大小SCSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！