Я злоупотребляю sass распространением здесь? - PullRequest
Новая
       25

Я злоупотребляю sass распространением здесь?

0 голосов
/ 04 января 2019

Я использую sass %extend с display:flex для кросс-браузерной совместимости, и я закончил с этим длинным списком вложенных элементов в моем файле CSS только для flexBox.

стиль:

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

Это нормально, или это чрезмерное использование% extends, и если да, то какова лучшая практика?

Спасибо

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Если вы хотите создать кросс-браузерный стиль совместимости с 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;
}
0 голосов
/ 04 января 2019

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

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