我可以在一行中列出 SASS Map/List 的所有值吗？

Question

我正在尝试在我的 SCSS 代码中设置一些登录名，以使单个 class 根据所应用的元素类型的不同而有所不同。在这种情况下，我想让 shadow-#{$size} 的 class 将文本阴影应用于文本元素（如 Sass Map/List 中所述）并应用框阴影其他一切。

我目前的 SASS 地图布局如下：

$text-type-map: (
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    span,
    ul,
    li
);

而且我的 text-shadow 通过一个简单的 @each 循环正确地应用于该地图中的所有元素：

@each $name, $size in $shadow-size-map {
    @each $type in $text-type-map {
        #{$type}.shadow-#{$name} {
            text-shadow: 0px #{$size} rgba($dark, 0.5);
        }
    }
}

但是当涉及到将逻辑应用于列表中不的每个元素时，我遇到了一些麻烦。

我对此的第一个想法是应用 :not() 伪选择器。但是这个的实现有点棘手。这里的目标是创建这样的东西：

.shadow-#{$name}:not(h1):not(h2):not(h3) ect... {
    box-shadow: 0px #{$size} rgba($dark, 0.5);
}

但我不太确定该怎么做。我试过使用 map-keys() SCSS 函数：

.shadow-#{$name}:not(map-keys($text-type-map)) {
    box-shadow: 0px #{$size} rgba($dark, 0.5);
}

但这似乎没有任何作用。

有谁知道是否有更好的方法来实现这个（如 @if / @else 函数）或使 :not() 选择器正常工作的方法 - 基本上列出 [= 中的所有项目45=] 在单行上映射，每个值都在它自己的 :not().

Answer 1

只要列表是逗号分隔的（map-keys 的输出应该是），你实际上可以通过转义 :not 选择器中的 Sass 列表来实现这一点

.example:not(#{map-keys($text-type-map)}) {
    color: red;
}

// output:
// .example:not(h1, h2, h3, h4, h5, h6, p, a, span, ul, li) {
//   color: red;
// }

但是，对选择器列表的支持是 :not 的 somewhat newer 功能，在 IE 和其他奇怪的浏览器中不受支持。

如果您需要该支持，您可能需要编写一个函数来链接非选择器：

@function not-chain($list) {
  $output: '';
  @each $selector in $list {
    $output: $output + ':not(#{$selector})';
  }
  @return $output;
}

$exclude: map-keys($text-type-map);

.example#{not-chain($exclude)} {
    color: red;
}

// output:
// .example:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p):not(a):not(span):not(ul):not(li) {
//   color: red;
// }

我可以在一行中列出 SASS Map/List 的所有值吗？

Can I list all of the values of a SASS Map/List in one line?

css

sass