css - 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 在 mixin 中不起作用。

@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'
;