如何选择我要传递给mixin的特定内容？

Question

我在SASS中有一个@mixin呼叫倾斜。

@mixin skewed {
  position: relative;
   &::before {
    content: '';
    display: block;
    width: 100%;
    height: 50px; 
    position: absolute;
    transform: skewY(-2deg);
    @content;
  }
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 50px; 
    position: absolute;
    transform: skewY(-2deg);
    @content;
  }
}

从上面，您可以看到“之前”和“之后”内部有@content。 下面是“页脚”类，如何将内容传递给“之前”而不是“之后”。

footer {
  padding: 2em 0 0;
  height: 100px;
  background-color: $color-shade;
  margin-top: 3.5em;
  @include skewed {
    background-color: red;
    top: -25px;
  }
}

Answer 1

您可以添加默认变量和条件。

DEMO

@mixin skewed($doesAfterHaveContent: false) {
  position: relative;
   &::before {
    content: '';
    display: block;
    width: 100%;
    height: 50px; 
    position: absolute;
    transform: skewY(-2deg);
    @content;
  }
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 50px; 
    position: absolute;
    transform: skewY(-2deg);

    @if ($doesAfterHaveContent) { @content; }
  }
}

.footer {
  @include skewed {
    color: red;
  }
}

.hey {
  @include skewed(true) {
    color: red;
  }
}