Sass循环函数导入文件

Question

如何使用 sass 循环功能导入多个文件？这是我的文件树结构。

/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";

我想使用 sass mixins 或函数或类似方法来减少 import 步骤。

更新

添加了一些我真正想要的 sass mixin 代码示例

注意：这只是一个演示目的，@import 在 mixins 中不起作用。

@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

如前所述，您可以在 Rails 项目中进行 dir/*/ 导入...请不要！ 通过使用完整的导入列表，您可以轻松阅读项目概述，并避免不必要的导入和混乱的顺序，以防有人添加新文件。这是我的做法（使用列表跳过多余的@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'
;