Функция Sass loop для импорта файлов

Question

Как я могу импортировать несколько файлов, используя функцию sass loop? Вот моя древовидная структура файла.

/scss/ 
    /pages/
        /home/
            home.scss
            home-sm.scss
            home-md.scss
            home-lg.scss
        /about/
            about.scss
            about-sm.scss
            about-md.scss
            about-lg.scss
        /contact/
            contact.scss
            contact-sm.scss
            contact-md.scss
            contact-lg.scss
        pages.scss

И структура импорта в pages.scss как показано ниже

//home
@import "home/home";
@import "home/home-xs";
@import "home/home-sm";
@import "home/home-md";
@import "home/home-lg";

//about
@import "about/about";
@import "about/about-xs";
@import "about/about-sm";
@import "about/about-md";
@import "about/about-lg";

//contact
@import "contact/contact";
@import "contact/contact-xs";
@import "contact/contact-sm";
@import "contact/contact-md";
@import "contact/contact-lg";

Я хочу уменьшить это import шагов с помощью sass mixins или функции или подобного.

Обновлено

Добавлен пример кода sass mixin, который мне действительно нужен

Примечание : Это только демонстрационная цель, @import не работает в миксинах.

@mixin importPage($pageName) { 
    /***********************
    // #{$pageName} page
    ***********************/
    @import "#{$pageName}/#{$pageName}";
    @import "#{$pageName}/#{$pageName}-xs";
    @import "#{$pageName}/#{$pageName}-sm";
    @import "#{$pageName}/#{$pageName}-md";
    @import "#{$pageName}/#{$pageName}-lg"; 
}

//Importing Files
@include importPage(home);  
@include importPage(about);  
@include importPage(contact); 

Примечание : Я думаю, что использование метода @import "scss/**/*" не очень выгодно для некоторых случаев, таких как упорядочение файлов по приоритетам, переопределение и т. Д.

Буду признателен за любую помощь.

Answer 1

Как уже упоминалось, вы можете dir/*/ импортировать в Rails проекты ... пожалуйста, не делайте! Используя полный список импорта, вы легко читаете обзор своего проекта и избегаете ненужного импорта и неправильного порядка на случай, если кто-то добавит новый файл. Вот как я это сделаю (используя список для пропуска избыточных операторов @import)

@import 
    // home
    'home/home',
    'home/home-xs',
    'home/home-sm',
    'home/home-md',
    'home/home-lg',

    // about
    'about/about',
    'about/about-xs',
    'about/about-sm',
    'about/about-md',
    'about/about-lg',

    // contact
    'contact/contact',
    'contact/contact-xs',
    'contact/contact-sm',
    'contact/contact-md',
    'contact/contact-lg'
;

Обновление Вы можете создать пакетные файлы в каждом каталоге, чтобы упростить импорт основного файла

// ––––––––––––––––––––––––––––––––––
// bundle home/_bundle.scss  
// ––––––––––––––––––––––––––––––––––
@import 
    'home/home',
    'home/home-xs',
    'home/home-sm',
    'home/home-md',
    'home/home-lg'
;

// ––––––––––––––––––––––––––––––––––
// bundle about/_bundle.scss  
// ––––––––––––––––––––––––––––––––––
@import 
    'about/about',
    'about/about-xs',
    'about/about-sm',
    'about/about-md',
    'about/about-lg'
 ;

// ––––––––––––––––––––––––––––––––––
// bundle contact/_bundle.scss  
// ––––––––––––––––––––––––––––––––––
@import 
    'contact/contact',
    'contact/contact-xs',
    'contact/contact-sm',
    'contact/contact-md',
    'contact/contact-lg'
;


// ––––––––––––––––––––––––––––––––––
//  Main file import
// ––––––––––––––––––––––––––––––––––
@import  
   'home/bundle',
   'about/bundle',
   'contact/bundle'
;