css相同的div怎么写才能减少代码?

<div class="common-div">内容1</div>
<div class="common-div">内容2</div>
<div class="common-div">内容3</div>

.common-div {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
}

<div>内容1</div>
<div>内容2</div>
<div>内容3</div>

div {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
}

.common-div {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;

    &:hover {
        background-color: red;
    }
}

.common-div {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
}
.common-div:hover {
    background-color: red;
}

<div class="bg-primary text-white p-3 m-2">内容1</div>
<div class="bg-primary text-white p-3 m-2">内容2</div>
<div class="bg-primary text-white p-3 m-2">内容3</div>

:root {
    --div-width: 100px;
    --div-height: 100px;
    --div-bg-color: blue;
    --div-margin: 10px;
}

.common-div {
    width: var(--div-width);
    height: var(--div-height);
    background-color: var(--div-bg-color);
    margin: var(--div-margin);
}

.common-div {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
}

.special-div {
    @extend .common-div;
    background-color: red;
}