如何在css（sass）中重用常见的css规则

我有一个CSS样式表如下

.icon1 {
    &:after {
        content:"";
        float: right;
        width: 8px;
        height: 8px;
        border-radius: 100%;                  
        background-color: #4ac102;
        display: block;
        position: relative;
    }
}

.icon2 {
    &:after {
        content:"";
        float: right;
        width: 8px;
        height: 8px;
        border-radius: 100%;                
        background-color: #f1342f;
        display: block;       
        position: relative;
    }
}

.icon3 {
    &:after {
        content:"";
        float: right;
        width: 8px;
        height: 8px;
        border-radius: 100%;                
        background-color: #616a83;
        display: block;       
        position: relative;
    }
}

正如您所看到的，除了背景色之外，所有其他属性都是相同的。我可以重构此代码以使其干燥吗？

您可以使用以下方法：

  .icons {
    content:"";
    float: right;
    width: 8px;
    height: 8px;
    border-radius: 100%;      
    display: block;       
    position: relative;
  }

  .icon1 {
    &:after {
      @extend .icons;             
      background-color: #4ac102;
    }
  }
  .icon2 {
    &:after {
      @extend .icons;             
      background-color: #f1342f;
    }
  }

  .icon3 {
    &:after {
      @extend .icons;             
      background-color: #616a83;
    }
  }

您可以为此使用：

  .icons {
    content:"";
    float: right;
    width: 8px;
    height: 8px;
    border-radius: 100%;      
    display: block;       
    position: relative;
  }

  .icon1 {
    &:after {
      @extend .icons;             
      background-color: #4ac102;
    }
  }
  .icon2 {
    &:after {
      @extend .icons;             
      background-color: #f1342f;
    }
  }

  .icon3 {
    &:after {
      @extend .icons;             
      background-color: #616a83;
    }
  }

---

对于没有附加类的CSS/SCSS解决方案：

.icon1, .icon2, .icon3 {
    &:after {
        /* shared code */
    }
}

.icon1 {
    &:after {
      /* unique code */
    }
}

---

对于没有附加类的CSS/SCSS解决方案：

.icon1, .icon2, .icon3 {
    &:after {
        /* shared code */
    }
}

.icon1 {
    &:after {
      /* unique code */
    }
}

---

在html中创建一个图标类和一个仅用于背景色的类不是更好吗？ 在这种情况下，您将有如下内容：

<div class="icon icon-1"></div>
<div class="icon icon-2"></div>
<div class="icon icon-3"></div>

---

在html中创建一个图标类和一个仅用于背景色的类不是更好吗？ 在这种情况下，您将有如下内容：

<div class="icon icon-1"></div>
<div class="icon icon-2"></div>
<div class="icon icon-3"></div>

---

这有点离题了。CodeReview可能更适合……但首先检查他们的指南。@Paulie\u D为什么你会认为它离题了？所以不应该就此提出任何流程改进问题？这有点苛刻。我没有投反对票…我是说有一个专门的交换网站更合适。我真的不担心投反对票-这不是我生命的终点。。我更担心这些评论。。这些评论有助于我改进我的问题：）这有点离题了。CodeReview可能更适合……但首先检查他们的指南。@Paulie\u D为什么你会认为它离题了？所以不应该就此提出任何流程改进问题？这有点苛刻。我没有投反对票…我是说有一个专门的交换网站更合适。我真的不担心投反对票-这不是我生命的终点。。我更担心这些评论。。这些评论有助于我改进我的问题：）您的解决方案是可行的，但是如果您使用的是sass，那么您更喜欢使用继承。同意。我将其发布用于一般用途，因为OP代码没有使用任何特定于sass的内容。您的解决方案是可行的，但如果您使用的是sass，则您更倾向于使用继承。同意。我发布它是为了一般用途，因为OP代码没有使用任何特定于sass的东西。