如何选择我想要传递给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; 
    } 
}