SASS Mixin不起作用

Question

當使用hr（水平法則）時，我的一個mixin似乎無法正常工作 - 我認爲它只是恢復爲默認樣式。我已經傳入了兩個變量，它們只是徑向漸變的顏色。有人能告訴我我做錯了什麼，因爲我看不到它。我在文件中添加了正確的包含和導入。

<hr class="fancy-line"> 
__________________________________________________________ 

@mixin horizontal-line-styles ($color1, $color2) { 
    hr { 
     border: 0; 
     height: 1px; 
    &:after { 
     content:''; 
     height: 0.5em; 
     top: 1px; 
    } 
    &:before, hr:after { 
     content: ''; 
     position: absolute; 
     width: 100%; 
    } 
    hr, hr:before { 
     background: radial-gradient(ellipse at center, $color1 0%, $color2 75%); 
    } 
    } 
} 
__________________________________________________________ 
.fancy-line { 
    @include horizontal-line-styles(#e0afaf, #e0afaf); 
} 

Answer 1

所有你需要的是：

@mixin horizontal-line-styles ($color1, $color2) { 
    height: 1px; 
    border: none; 
    background: radial-gradient(ellipse at center, $color1 0%, $color2 75%); 
} 

.fancy-line { 
    @include horizontal-line-styles(blue, red); 
} 

或者，如果你真的想用僞元素：

@mixin horizontal-line-styles-1 ($color1, $color2) { 
    position: relative; 
    border: none; 

    &:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 1px; 
    background: radial-gradient(ellipse at center, $color1 0%, $color2 75%); 
    } 
} 

.fancy-line-1 { 
    @include horizontal-line-styles-1(blue, red); 
} 

Codepen Demo。

---

原始代碼有什麼問題？

起初它格式不對。修正：

@mixin horizontal-line-styles ($color1, $color2) { 
    hr { 
    border: 0; 
    height: 1px; 

    &:after { 
     content: ''; 
     height: 0.5em; 
     top: 1px; 
    } 

    &:before, 
    hr:after { 
     content: ''; 
     position: absolute; 
     width: 100%; 
    } 

    hr, 
    hr:before { 
     background: radial-gradient(ellipse at center, $color1 0%, $color2 75%); 
    }  
    } 
} 

當你打電話給你的mixin：產生

.fancy-line { 
    @include horizontal-line-styles(#e0afaf, #e0afaf); 
} 

下面的CSS代碼：

.fancy-line hr { 
    border: 0; 
    height: 1px; 
} 
.fancy-line hr:after { 
    content: ''; 
    height: 0.5em; 
    top: 1px; 
} 
.fancy-line hr:before, 
.fancy-line hr hr:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
} 
.fancy-line hr hr, 
.fancy-line hr hr:before { 
    background: radial-gradient(ellipse at center, #ff0000 0%, #008000 75%); 
} 

第一行：.fancy-line hr意味着元素hr必須是內部因素與fancy-line類名稱。但你有hr與這個班的名字：<hr class="fancy-line">。所以這些CSS規則都不適用。

Css background適用於.fancy-line hr hr:before。你沒有這個元素。這就是爲什麼你的代碼不起作用。你可以看看一些奇怪的規則：.fancy-line hr hr:after,.fancy-line hr hr:before,.fancy-line hr hr。

我的想法是將background直接設置爲.fancy-line元素（代碼示例＃1），並且不要使用:before和:after元素。