SASS Mixin funktioniert nicht

Question

einer meiner Mixins scheint nicht richtig zu arbeiten, wenn ich mit hr (horizontale Regel) arbeite - ich denke, es ist nur auf das Standard-Styling zurück. Ich habe zwei Variablen übergeben, die einfach die Farben des radialen Gradienten sind. Könnte mir bitte jemand sagen, was ich falsch mache, weil ich es nicht sehen kann. Ich habe die richtigen Includes und Importe in die Datei hinzugefügt.

<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

Alles, was Sie brauchen, ist:

@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); 
} 

Oder wenn Sie wirklich Elemente verwenden Pseudo wollen:

@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.

---

Was ist mit dem ursprünglichen Code falsch?

Zuerst ist es schlecht formatiert. Fixed:

@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%); 
    }  
    } 
} 

Wenn Sie Ihr mixin nennen:

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

folgenden CSS-Code generiert:

.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%); 
} 

Erste Zeile: .fancy-line hr bedeutet, dass Element hr muss innerhalb Element sein mit fancy-line Klasse Name. Aber Sie haben hrmit dieser Klassenname: <hr class="fancy-line">. Daher wird keine dieser CSS-Regeln angewendet.

Css background wird auf .fancy-line hr hr:before angewendet. Du hast dieses Element nicht. Deshalb funktioniert dein Code nicht. Als nächstes können Sie sich einige seltsame Regeln ansehen, die generiert werden: .fancy-line hr hr:after, .fancy-line hr hr:before, .fancy-line hr hr.

Meine Idee ist background direkt an .fancy-line Element (Codebeispiel # 1) zu setzen und verwenden Sie nicht :before und :after Elemente.