SASS 循环从变量字符串生成链式 :not()

Question

我有一长串 classes 我希望以多种方式使用。

列表看起来像这样（但更长）：

$my-components: '.some-component', '.some-other-component', '.another-component';

我需要在 SASS (scss) 中使用这个 class 名称列表的方法之一是创建一个长链 select 或 :not() 的。最终呈现的输出应如下所示：

.parent {
  > * {
    &:last-of-type:not(.some-component):not(.some-other-component):not(.another-component):not(etc) {
      // style rules
    }
  }
}

（目标是 select .parent 的最后一个子元素，该元素在列表中没有 class 之一。

问题：如何使用$my-components变量使上面的代码变干？

注意 1：循环的输出需要能够附加到 &:last-of-type，如上例所示。

注意 2：我已经在不同的函数中使用了 $my-components 变量，所以我希望尽可能保持相同的格式。

注意 3：我知道这看起来很老套而且很愚蠢，我应该只给所有这些元素一个共同的共享 class。但不幸的是我目前无法修改 DOM.

的那部分

Answer 1

使用@each 循环

scss:

$my-components: '.some-component', '.some-other-component', '.another-component';

.parent {
    > * {
        $selector: '';
        @each $component in $my-components {
            $selector: $selector + ":not(#{$component})"
        }
        &:last-of-type#{$selector} {
            color: blue;
        }    
    }
}

css:

.parent > *:last-of-type:not(.some-component):not(.some-other-component):not(.another-component) {
  color: blue;
}

发生了什么事？

我定义了一个新的字符串变量$selector。
在 @each 循环期间，我将字符串与 :not(#{$component}) 连接起来以添加新的选择器。

SASS 循环从变量字符串生成链式 :not()

SASS loop to generate chained :not() from variables string

css

sass

使用@each 循环

scss:

css:

发生了什么事？