SASS混音器不工作

当使用hr水平规则时，我的一个混音器似乎无法正常工作-我认为它只是恢复到默认样式。我传入了两个变量，它们只是径向渐变的颜色。谁能告诉我我做错了什么，因为我看不太清楚。我在文件中添加了正确的include和imports

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

您所需要的只是：

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

代码笔

原始代码有什么问题

起初它的格式不好。固定的：

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

第一行：。花式线hr表示元素hr必须位于具有花式线类名的元素内部。但您有具有此类名的hr:。所以这些css规则都没有被应用

Css背景应用于。花式线条hr:before。你没有这个元素。这就是你的代码不起作用的原因。此外，您还可以查看生成的一些奇怪规则：。花式线hr:after、.花式线hr:before、.花式线hr-hr

---

我的想法是直接将背景设置为。花哨的线条元素代码示例1，不要使用：before和：after元素。

我能问一下吗？我问的问题有什么问题吗？谢谢你的回答，我仍然不得不使用重复代码，使用mixin无法实现我的hr所需的外观。