Question

想象一组规则，如下所示：

span, div { color: red; }    
span { background: white; }
div { background: black; }

是否可以按照1个SCSS规则包装它们？形式如下：

span, div {
    & { color: red; }    
    &:not(div) { background: white;}    
    &:not(span) { background: black; }
}

不幸的是，这样的方法很容易变得很大。因此，我希望可以对顶部显示的代码进行SCSS实现，但不使用:not(<every other selector>)。

最好看起来像（无效代码）：

span, div {
    & { color: red; }    
    &(span) { background: white;}    
    &(span) { background: black; }
}

Answer 1

我认为不可能以这种方式做您想做的事（（但我可能错了）。

下面的代码实现了您正在寻找的结果，但是使用了一个映射，一个@mixin和@extend而不是一个选择器。也许对于您想要实现的目标来说有点太复杂了，但我希望它能对您有所帮助：

@mixin setSelectors($elements) {
  %commonProperties {
    @content;
  }

  @each $selector, $properties in $elements {
    #{$selector} {
      @extend %commonProperties;
      @each $property, $value in $properties {
        #{$property}: #{$value};
      }
    }
  }
}

@include setSelectors((
  span: (background: white),
  div: (background: black)
)) {
  color: red; // Common properties
}

会返回：

div, span { color: red; }
span { background: white; }
div { background: black; }

第一个参数是包含所有选择器及其特定属性的映射。 @content中的@mixin包含共享属性。如果您需要添加没有任何特定属性的选择器，则可以使用null作为键将其添加到地图。如：

@include setSelectors((
  span: (background: white),
  div: (background: black),
  i: null
)) {
  color: red;
}

但是，此解决方案不允许嵌套选择器，因此我认为分离选择器是最好的方法。

在SCSS中从组中排除元素

1 个答案: