mixin 并使用 scss 将其附加到伪元素

Question

我在 mixins.scss 文件中创建了以下 mixin。 根据codepen的 cheveron-circle-right 的工作示例

@mixin custom-cheveron-cirle-right {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-left: 1.5em;
    background-color:#0069AA;
    position:relative;
    &::after {
      position:absolute;
      top:4px;
      left:3px;
      width: 3px;
      height: 3px;
      border-top: 3px solid #fff;
      border-right: 3px solid #fff;
      transform: rotate(45deg);
    }
  }

以上mixins我在现有的li:before节点中附加如下

 li:before { @include custom-cheveron-cirle-right; 
    content:''; 
    float: left;
     margin-left: -.75rem;
     padding: .185rem 0 0 0;
     font-size: .75rem;
     transform: rotate(0.001deg);
 }

但是当我渲染它时，它只是渲染circle而不渲染circle内的arrow ，这里的基本目的是不使用font-awesome库，需要有我们自己的自定义图标，这些图标是使用 CSS 创建的和mixins 。

Answer 1

你有两个问题：

• 您缺少content:''; 在::after里面 mixin
• 您将 mixin ( @include ) 包含在::before中，而不是父级，然后生成无效的 CSS li::before::after

注意：：将li更改为div以匹配您的 codepen HTML

这是一个代码笔

@mixin custom-cheveron-cirle-right {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-left: 1.5em;
  background-color: #0069aa;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 3px;
    width: 3px;
    height: 3px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
  }
}

div {
  @include custom-cheveron-cirle-right;
  &::before {
    content: "";
    float: left;
    margin-left: -0.75rem;
    padding: 0.185rem 0 0 0;
    font-size: 0.75rem;
    transform: rotate(0.001deg);
  }
}