将HTML标记插入SASS中的mixins是否是一种好习惯？

Question

我从未在下面找到与我要解决的主题相关的任何具体信息，所以我输入问题。

通常，当我想创建自定义项时，甚至在使用Webkit时，我会创建一个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);
    }
}