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

我想import用 sass mixin 或函数或类似的方法来减少这个步骤。

更新

添加了一些我真正想要的 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

正如提到的，你可以做dir/*/在 Rails 项目中进行导入...请不要！\n通过使用完整的导入列表，您可以轻松阅读项目的概述，并避免不必要的导入和混乱的顺序，以防有人添加新文件。这是我的做法（使用列表来跳过冗余的 @import 语句）

\n\n

@import \n    // home\n    'home/home',\n    'home/home-xs',\n    'home/home-sm',\n    'home/home-md',\n    'home/home-lg',\n\n    // about\n    'about/about',\n    'about/about-xs',\n    'about/about-sm',\n    'about/about-md',\n    'about/about-lg',\n\n    // contact\n    'contact/contact',\n    'contact/contact-xs',\n    'contact/contact-sm',\n    'contact/contact-md',\n    'contact/contact-lg'\n;\n

\n\n

更新\n您可以在每个目录中创建捆绑文件以简化主文件导入

\n\n

// \xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\n// bundle home/_bundle.scss  \n// \xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\n@import \n    'home/home',\n    'home/home-xs',\n    'home/home-sm',\n    'home/home-md',\n    'home/home-lg'\n;\n\n// \xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\n// bundle about/_bundle.scss  \n// \xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\n@import \n    'about/about',\n    'about/about-xs',\n    'about/about-sm',\n    'about/about-md',\n    'about/about-lg'\n ;\n\n// \xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\n// bundle contact/_bundle.scss  \n// \xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\n@import \n    'contact/contact',\n    'contact/contact-xs',\n    'contact/contact-sm',\n    'contact/contact-md',\n    'contact/contact-lg'\n;\n\n\n// \xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\n//  Main file import\n// \xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\xe2\x80\x93\n@import  \n   'home/bundle',\n   'about/bundle',\n   'contact/bundle'\n; \n

\n