Moins de modificateur CSS responsive

J'essaie de créer une collection de classes CSS d'abord utilitaire, similaire à Tailwind mais en Less. Une grande partie de cela utilise des modificateurs réactifs, en utilisant cette syntaxe de nom de classe : .large\:text-white.

Le code ci-dessous fonctionne très bien, à une exception près : le \: ne doit pas être rendu sur les classes par défaut (les classes en dehors des media queries. Ils doivent être rendus en utilisant un point, comme prévu .foo.

Je n'arrive pas à comprendre comment résoudre cela.

@screens: {
    small:          320px;
    medium:         768px;
    large:          1024px;
}

@padding: {
    0:              0;
    10:             1rem;
    20:             20rem;
    30:             30rem;
}

@colors: {
    white:          #fff;
    silver:         hsla(0, 0%, 90%, 1);
}

@responsive-modifiers: true;

#config () {
    .generate(pt, padding, @padding);
    .generate(py, padding-top, @padding);
    .generate(text, color, @colors);
    .generate(background, background-color, @colors);
}

// Call the mixin
#config();


each(@screens, {
    @media (min-width : @value) {
        .@{key} when (@responsive-modifiers = true) {
            #config();
        }
    }
})

.generate(@prefix, @property, @list) {
    each(@list, {
        &\:@{prefix}-@{key} {
            @{property}: @value;
        }
    });
}