css - 如何在css(sass)中重用常见的css规则

Closed. This question is opinion-based。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。
                        
                        3年前关闭。
                                                                                            
                
        
我有一个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;
    }
}

如您所见，除了背景色以外，其他所有属性都相同。我可以重构此代码以使其变干吗？

最佳答案

您可以为此使用Extend/Inheritance：

  .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 - 如何在css(sass)中重用常见的css规则，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38463252/