如何使用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/**/*"
方法并不是一个好办法。
非常感谢您的帮助。
contact.scss
应包含-xs
、-sm
、-md
和-lg
文件?这样做虽然不能减少import
语句的数量,但有助于对这些文件进行分类和放置到正确的位置。 - Toan Lu