Не злоупотребляю ли я здесь sass extension?

Это хорошая практика, потому что если вы хотите использовать это свойство, вы пишете так:

For Example: 
.row{display: -webkit-box; display: -ms-flexbox; display: flex;}
nav .container{display: -webkit-box; display: -ms-flexbox; display: flex;}
nav form{display: -webkit-box; display: -ms-flexbox; display: flex;}
nav form .input-group{display: -webkit-box; display: -ms-flexbox; display: flex;}
nav ul:first-of-type{display: -webkit-box; display: -ms-flexbox; display: flex;}
.sr-buttons.internal{display: -webkit-box; display: -ms-flexbox; display: flex;}
.main-form .status{display: -webkit-box; display: -ms-flexbox; display: flex;}
.main-form .status>aside>ul:first-child{display: -webkit-box; display: -ms-flexbox; display: flex;}
.main-form>ul{display: -webkit-box; display: -ms-flexbox; display: flex;}
.main-form>ul>li{display: -webkit-box; display: -ms-flexbox; display: flex;}
.publish{display: -webkit-box; display: -ms-flexbox; display: flex;}
.publish>div{display: -webkit-box; display: -ms-flexbox; display: flex;}
.publish>div>ul{display: -webkit-box; display: -ms-flexbox; display: flex;}
.publish>div>div{display: -webkit-box; display: -ms-flexbox; display: flex;}
.publish.active>div>ul>li{display: -webkit-box; display: -ms-flexbox; display: flex;}

One more option you can use like this:
.commonFlex{display: -webkit-box; display: -ms-flexbox; display: flex;}

Если вы хотите создать стиль кроссбраузерной совместимости с помощью sass. много способов сделать это. Один из способов создания миксина. сначала вы создаете такой миксин:

@mixin display-flex($important: '') {
    @if $important == '' {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    } @else {
        display: -webkit-box $important;
        display: -moz-box $important;
        display: -ms-flexbox $important;
        display: -webkit-flex $important;
        display: flex $important;
    }
}

Затем вы можете использовать этот миксин с использованием @include следующим образом

.row {
    @include display-flex;
}

ИЛИ

.row {
    @include display-flex(!important);
}

Если вы хотите расширить это. ты сможешь

%display-flex {
    @include display-flex;
}
.row {
    @extend %display-flex;
}