SASS & LESS - расширение разделенного класса

Question

Просто хотелось узнать, существует ли какой-либо способ расширения только первых двух разделенных классов, как в примере, или либо существует любой другой вариант, например, создание определенного класса .background{background:red} и использование его в качестве расширения вместо отдельного класса (но я не хочу выводить в CSS класс .background).

ПРИМЕРЫ:

SASS:

.foo { 
    background:red 
} 
.foo { 
    color:red 
} 
.bar { 
    @extend .foo; 
} 
.foo { 
    font-size: 16px 
} 

МЕНЬШЕ:

.foo { 
    background:red 
} 
.foo { 
    color:red 
} 
.bar { 
    &:extend(.foo); 
} 
.foo { 
    font-size: 16px 
} 

Выход в CSS будет:

.foo, .bar { 
    background: red; 
} 

.foo, .bar { 
    color: red; 
} 

.foo, .bar { 
    font-size: 16px; 
} 

Но я хочу быть похожим на это:

.foo, .bar { 
    background: red; 
} 

.foo, .bar { 
    color: red; 
} 

// No .bar class here 

.foo { 
    font-size: 16px; 
} 

Каким образом я должен следовать, чтобы это произошло?

Answer 1

У вас есть наследование назад. bar не распространяется foo, foo расширяет bar:

_МИНУС:

.bar { 
    background-color: red; 
} 

.bar { 
    color: red; 
} 

.foo { 
    &:extend(.bar); 
    font-size: 16px; 
} 

Производит

_CSS:

.bar, 
.foo { 
    background-color: red; 
} 
.bar, 
.foo { 
    color: red; 
} 
.foo { 
    font-size: 16px; 
}