Объединение нескольких препроцессоров CSS

Question

У нас есть сотни бесплатных файлов на производстве, но мы также хотели бы включить в него файлы .scss.

я должен был бы сделать свой собственный тип файла для компиляции mutliple типов файлов препроцессора CSS или есть уже способ сделать что-то вроде этого:

@import 'less-styles.less'; 
@import 'scss-styles.scss'; 
@import 'stylus-styles.styl'; //potentially 

которой она производит один файл CSS в этот заказ.

Answer 1

Из-за действительного кода CSS также действует Меньше кода, вы можете сначала скомпилировать ваши файлы SCSS и стилуса в CSS и импортировать их.

sass scss-styles.scss scss-styles.css 

чем в вашем Less код:

@import (less) scss-styles.css 

less ключевое слово выше делает:

меньше: не рассматривать файл как Less файл, независимо от того, что расширение файла

Вышеуказанное означает, что вы можете расширять и смешивать C Селекторы SS из файла scss-styles.css в вашем Меньшем коде.

Обратите внимание, что переменные и микшины из файла scss-styles.css недоступны для (повторного) использования в Менее.

Если вам нужны переменные и микшины, единственным решением является to convert your SCSS to Less. См. Также: https://github.com/bassjobsen/grunt-scss2less

Вы должны быть в состоянии сделать то же самое для файлов стилей (.styl).

Answer 2

До сих пор я не видел никаких инструментов, которые позволяли бы разработчикам перекрестно ссылаться на LESS mixins от Sass или versa-vice.

Это не означает, что вы не можете использовать несколько препроцессоров на одном сайте, это просто означает, что вы ограничены в том, как они могут взаимодействовать. С инструментами concatenation и minification вы, безусловно, можете создать LESS и Sass отдельно, а затем объединить их в один файл, который будет уменьшен.

Со всем сказанным я очень не рекомендую этот подход. Выберите технологию для проекта и придерживайтесь ее. Таким образом, вы можете максимально использовать имеющиеся инструменты и только беспокоиться о едином жизненном цикле (обновлениях, изменениях API и т. Д.).