Как переопределить стили css, когда @extend из другого класса в scss?

Если я правильно понимаю ваш вопрос, его нельзя переопределить, например

.a, .b {
    height: 100px;
    width: 200px;
}

Поскольку он будет применять width: 200px; как к .a, так и к .b, вам нужно применить width: 200px; только к .b, верно? Таким образом, предоставленный вами код уже работает идеально.

Это уже делает именно то, что вы хотите.

У вас может быть .b выше вашего .a, .b, тогда победит последний стиль.

Читайте на каскадный порядок

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

.a, .b {
    height: 100px;
    width: 100px;
}

.b {
    height: 200px;
}

/* ignore */
div{
  background-color: red;
}
body{
  display: inline-flex;
}

<div class = "a"></div>
<span>|</span>
<div class = "b"></div>
<span>|</span>
<div class = "a b"></div>

Затем, какой селектор в большей части ниже будет применять это общее правило для любого файла CSS.

Высота будет <div class = "a b"> 200 пикселей;

.a {
    height: 100px;
    width: 100px;
    }   
.b {
    @extend .a;
    height: 200px;
}

Высота будет <div class = "a b"> 100 пикселей;

.b {
    @extend .a;
    height: 200px;
}
.a {
    height: 100px;
    width: 100px;
}

Всегда высота будет <div class = "a b"> 200px, доза заказа не имеет значения;

.a {
    height: 100px;
    width: 100px;
    &.b {
       height: 200px;
    }
}

вы можете использовать обертку

.a {
    height: 100px;
    width: 100px;
}

.b {
    @extend .a;
}

.wrapper .b {
    height: 200px;
}

HTML

<div class='wrapper'><div class='b'> XXX </div></div>

Вы также можете использовать !important.

.a {
    height: 100px;
    width: 100px;
}

.b {
    @extend .a;
    height: 200px !important;
}