Выполнить минимальные наборы правил CSS с общими и конкретными частями, используя scss?

Question

    .name {
        %common {
            // common stuff
        }  

        &__first-type {
            @extend %common;
            // first type thing
        }
        enter code here
        &__second-type {
            @extend %common;
            // second type thing
        }
    }

Я хочу свернуть все в классе имени (первый тип, второй тип, а также общая часть) но я не хочу ничего больше в исполняемом файле CSS.

    .name__first-type, .name__second-type {
        //common thing
    }

    .name__first-type {
        //first type thing
    }

    .name__second-type {
        //second type thing
    }

я могу сделать это без разделения неисполняемого общего (% общего)?

Answer 1

Можно сгенерировать эти два класса, как это.

    %name__common {
        // common stuff
    }  
    .name {
        &__first-type {
            @extend %name__common;
            // first type thing
        }

        &__second-type {
            @extend %name__common;
            // second type thing
        }

Если вы работаете с хорошей архитектурой проекта, вы можете поместить этот% name__common {...} в частичный файл, такой как _commons.scss или попробуйте изменить стиль кодирования вашего проекта.