更少优化代码

Question

我有以下结构：

<div class ="shops"> 
    <div class = "shops__item_left"> 
    <div class = "shops__item_right"> 
    <div class = "shops__descr"> 
</div> 

而且可以说，我需要开始与所有块“shops_item”有一个共同的CSS属性一样background: black。

我该怎么做？ 我当然能做到这样的：

.shops { 
    font-size: 15px; 
    &__item_left { 
     background: black; 
    } 
    &__item_right { 
     background: black; 
    } 

但我怎么摆脱这种重复。

Answer 1

有几个选项。您可能需要重构有点像这样（注意多类名）：

<div class="shops"> 
    <div class="shops__item shops__item--left"> 
    <div class="shops__item shops__item--right"> 
    <div class="shops__descr"> 
</div> 

.shops { 
    font-size: 15px; 

    &__item { 
    background: black; 

    &--left { ... } 
    &--right { ... } 
    } 

} 

另外，您可以留下您的标记一样，选择含shops__item某处的类名所有元素他们。

[class*="shops__item"] { 
    background: black; 
}