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

OR

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

如果要扩展此范围。你可以

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

我在这里过度使用Sass吗？

2 个答案: