如何選擇我想要傳遞給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; 
    } 
}