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; 
}