Блог

Главная - Вопросы по программированию - Можно ли обернуть МЕНЬШЕ импорта классом И отобразить его определения базового стиля?

Можно ли обернуть МЕНЬШЕ импорта классом И отобразить его определения базового стиля?

#less

Вопрос:

Проблема

Извините, если название немного сбивает с толку. Мой мозг чувствует себя как яблочное пюре, пытаясь разобраться в этой проблеме, и я не мог придумать хорошего слова для этого.

Мне нужно обернуть существующие @imported стили внутри нового класса И сохранить существующие определения стилей в отображаемом CSS. Я хотел бы сделать это без удвоения размера файла путем повторного включения импорта. У меня нет доступа к разметке, и редактирование каждого из my-widget.less файлов заняло бы целую вечность.

Что у меня есть

Ранее существовавшие МЕНЬШЕ:

 @import "my-widget.less";

С новой оболочкой класса:

 @import "my-widget.less";

.new-class {
    @import "my-widget.less";
}

Вывод CSS (удвоенный размер файла):

 .my-widget {
    ...
}
.new-class .my-widget {
    ...
}

Чего я хочу

Желаемый выходной CSS:

 .my-widget, .new-class .my-widget {
   ...
}

Что я пробовал

Используя родительский селектор, надеясь, что он будет работать, но он не отображает никаких правил:

 amp;, .new-class {
    @import "my-widget.less";
}

Использование селектора все (это вызывает слишком много специфичности и нарушает стили):

 *, .new-class {
    @import "my-widget.less";
}

Я пробовал использовать миксин, но в итоге я просто удвоил размер файла.

Кто-нибудь когда-нибудь сталкивался с такой ситуацией, и как вы ее разрешили?

Спасибо!

Метки: