Question

我的一个mixin在使用hr（水平规则）时似乎无法正常工作 - 我认为它只是恢复到默认样式。我传递了两个变量，它们只是径向渐变的颜色。有人可以告诉我，我做错了什么，因为我无法看到它。我在文件中添加了正确的包含和导入。

<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元素。

SASS Mixin不工作

1 个答案: