SASS元素相同的风格，但有些不同

Question

你好，我只是想知道我将如何做到两个元素具有相同的风格，但也有一些样式不同的例子，我想如何编译。

.bubble-right, 
.bubble-left { 
    font-size: 16px; 
    padding: 50px 40px; 
    text-align: center; 
    color: white; 
    width: 225px; 
    height: 224px; 
    font-weight: bold; 
    background-image: url('../images/Speech-bubble-FDEB1.png'); 
} 

.bubble-right { 
    float: right; 
    margin: 0 0 25px 25px; 
} 

.bubble-left { 
    float: left; 
    margin: 0 25px 25px 0; 
} 

Answer 1

就像gunr2171说，你会作出沿下面的代码行的东西。两个元素将共享泡沫类，并且每个单独的元素将具有作为另一个类的泡泡向左或向右泡泡。我创建了以下scss格式的示例：

.bubble{ 
    font-size: 16px; 
    padding: 50px 40px; 
    text-align: center; 
    color: white; 
    width: 225px; 
    height: 224px; 
    font-weight: bold; 
    background-image: url('../images/Speech-bubble-FDEB1.png'); 
    &.bubble-left{ 
     float: left; 
     margin: 0 25px 25px 0; 
    } 

    &.bubble-right { 
     float: right; 
     margin: 0 0 25px 25px; 
    } 
} 

Answer 2

非常务实：

.bubble { 
    font-size: 16px; 
    margin-bottom: 25px; 
    padding: 50px 40px; 
    text-align: center; 
    color: white; 
    width: 225px; 
    height: 224px; 
    font-weight: bold; 
    background-image: url('../images/Speech-bubble-FDEB1.png'); 
} 

.bubble-right { 
    @extend .bubble; 
    float: right; 
    margin-left: 25px; 
} 

.bubble-left { 
    @extend .bubble; 
    float: left; 
    margin-right: 25px; 
}