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

Question

У меня есть код scss:

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

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

Скомпилированный CSS выглядит так:

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

.b {
    height: 200px;
}

когда я применяю этот стиль, dom <div class="a b"> будет иметь высоту 100pxвместо 200px.Как я могу заставить CSS взять высоту 200px в этом случае?

Answer 1

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

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

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

Наконец, сортировка по указанному порядку: если два объявления имеют одинаковый вес, происхождение и специфику, последний указанный выигрывает.Объявления в импортированных таблицах стилей считаются перед любыми объявлениями в самой таблице стилей.

.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>

Answer 2

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

Высота будет <div class="a b"> 200px;

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

Высота будет <div class="a b"> 100px;

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

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

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

Answer 3

Если мое понимание вашего вопроса верно, оно не может быть отменено, как

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

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