Будет ли хорошей практикой вставлять тег HTML в миксины в SASS? - PullRequest
0 голосов
/ 21 марта 2019

Я никогда не находил ничего конкретного и конкретного в предмете, к которому я обращаюсь, поэтому я ввожу вопрос.

Обычно, когда я хочу создать настройку и даже больше при использовании веб-наборов, я создаю функцию mixins, а не заполнитель.

Это правильно? Это хорошая практика?

Или другим решением было бы вставить эти селекторы в заполнитель?

ПРИМЕР 1:

@mixin remove-input-autofill {
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active {
        @extend %remove-input-autofill;
    }
}

ПРИМЕР II

@mixin table-inline-elements {
    thead,
    tbody {
        th,
        td { vertical-align: middle !important; }
    }

    thead { 
        font-size: .7rem;
        background-color: #F7F7F7;

        th { 
            border-top: none !important;

            &[data-element-type="thead-cell-custom"] {
                @include padding-horizontal(1rem, 1rem);
            }
        }
    }

    tbody {
        td[data-element-type="tbody-cell-custom"] { font-weight: bolder; }
    }
}

ПРИМЕР 4

@mixin generate-table-nth($page-name) {
    @if $page-name == 'indicators-page' {
        $table-list: (
            table-contract-details: (
                'SHOPPING:', 
                'NOME FANTASIA (ATUAL):', 
                'CÓD. CONTRATO:', 
                'DATA ASSINATURA CONTRATO:', 
                'DDATA CADASTRO CONTRATO:',
                'DATA INAUGURAÇÃO:', 
                'DATA INÍCIO CONTRATO:', 
                'DATA FIM CONTRATO:', 
                'PRAZO CONTRATO:', 
                'ATIVIDADE:'
            ),
            table-contract-rent: (
                'SHOPPING:',
                'CÓD. CONTRATO:',
                'NOME FANTASIA (ATUAL):',
                'DATA INÍCIO ALUG. CONTRATUAL:',
                'DATA FIM ALUG. CONTRATUAL:', 
                'ALUGUEL CONTRATUAL:',
                'DATA RENEGOCIAÇÃO:'
            ),
            table-percent-rent: (
                'SHOPPING:',
                'CÓD. CONTRATO:',
                'NOME FANTASIA (ATUAL):',
                'TIPO PRODUTO:',
                'DATA INÍCIO ALUGUEL %:',
                'DATA FIM ALUGUEL %:',
                'VOLUME VENDA:',
                '% VENDA:'
            ),
            table-minimum-rent-reduction: (
                'SHOPPING:',
                'CÓD. CONTRATO:',
                'NOME FANTASIA (ATUAL):',
                'DATA INÍCIO:',
                'DATA FIM:',
                'VALOR:',
                'TIPO REDUÇÃO:',
                'OBSERVAÇÃO'
            )
        );

        @include create-nth($table-list);
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...