SASS Mixinが動作しない

Question

私のmixinsの1つが、hr（horizo​​nal rule）で作業しているとき正しく動作していないようです - 私はそれがデフォルトのスタイリングに戻っていると思います。私は単純に放射状の勾配の色である2つの変数を渡しました。誰かが私が間違っていることを私に教えてもらえますか？ファイルに正しいインクルードとインポートを追加しました。

<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-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) { 
    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 ($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); 
} 

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。

私の考えは.fancy-line要素（コード例＃1）に直接backgroundを設定すると:beforeと:after要素を使用していないです。