我在这里过度使用 sass extend 了吗？

Question

为了跨浏览器兼容性，我将 sass %extend 与 display:flex 一起使用，最后我在我的 css 文件中得到了这个长长的嵌套元素列表，仅用于 flexBox .

造型：

display: -webkit-box;
display: -ms-flexbox;
display: flex;

这是对 %extend 的过度使用吗？如果是，最佳做法是什么。

谢谢

Answer 1

这是一个很好的做法，因为如果你想使用这个属性你可以这样写

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;}

Answer 2

如果你想用 sass 构建跨浏览器兼容性样式。有很多方法可以做到这一点。创建mixin的一种方法。首先你创建一个这样的mixin：

@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来使用这个mixin

.row {
    @include display-flex;
}

或

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

如果你想扩展这个。你可以

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

我在这里过度使用 sass extend 了吗？

Am I overusing sass extend here?

css

sass

extend