Question

我有一些看起来像这样的sass

.activities {
  border: 1px solid green;

  .activity {
    background-color: red;

    &:first-child {
      background-color: yellow;
    }
  }  
}

只有当.activity类的父元素不具有类.activities时，我希望第一个子元素的.events元素为黄色。

在下面的示例中，第一个.activity元素应该有background-color: red

<div class="activities events">
  <div class="activity">one</div>
  <div class="activity">two</div>
  <div class="activity">three</div>
</div>

当.activities的元素还有.events的元素时，是否有一种干的方式来否定这种第一个孩子的风格？

或者这是最简单的方法：

.events .activity:first-child {
  background-color: red;
}

Answer 1

当活动元素没有事件类时，使用:not选择器应用黄色背景。

.activities {
    border: 1px solid green;

    .activity {
        background-color: red;
    }

    &:not(.events) {
        .activity:first-child {
            background-color: yellow;
        }
    }  
}

此方法有助于减少重复。如果你突然决定活动应该是蓝色而不是红色，你只需要在一个地方改变它，而不是两个。

https://developer.mozilla.org/en/docs/Web/CSS/:not

Answer 2

我很无聊，想看看我是否可以将所有activity款式保留在一个activity孩子中并想出这个 - 虽然我不建议将其用于Nathan＆回答，因为这确实是一个毫无意义的过度解决方案：

.activities {
  border: 1px solid green;

  .activity {
    background-color: red;

    &:first-child {
      @at-root #{selector-replace(&, '.activities', '.activities:not(.events)')} {
        background-color: yellow;
      }
    }
  }
}

如果你不想重复这些活动＆＃39; class，你可以将它缓存为变量：

.activities {
  $this: &;

  border: 1px solid green;

  .activity {
    background-color: red;

    &:first-child {
      @at-root #{selector-replace(&, $this, '#{$this}:not(.events)')} {
        background-color: yellow;
      }
    }
  }
}

萨斯走得太远了吗？

Sass条件＆符号

2 个答案: