Sass循环函数用于导入文件

Question

Sass循环函数用于导入文件

5

如何使用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的mixin或函数等方式来减少这些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/**/*"方法并不是一个好办法。

非常感谢您的帮助。

- Krish

看一下这个答案 https://dev59.com/OG445IYBdhLWcg3wmLhe - Marko Letic

可能是Is it possible to import a whole directory in sass using @import?的重复问题。 - Marko Letic

我已经查看了它，但包含的顺序应该是一个问题。 - Krish

你能否将后缀文件的导入语句移动到主文件中，例如contact.scss应包含-xs、-sm、-md和-lg文件？这样做虽然不能减少import语句的数量，但有助于对这些文件进行分类和放置到正确的位置。 - Toan Lu

contact.scss文件仅包含联系页面的通用代码，我们需要遵循此文件结构。 - Krish

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jakob E · Accepted Answer

正如提到的，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'
;