每个人(希望)都在努力实现代码模块化.我所试图做的是有其中进口我所有的模块,这是谐音1个主萨斯文件,这些谐音可以调用自己的泛音组如果需要的话.我想是不是调用媒体查询都在我的代码库(如下所述:http://css-tricks.com/media-queries-sass-3-2-and-codekit/),有一个媒体. sass文件,管理每个模块不同屏幕尺寸的所有不同样式.
这是我的Sass文件的文件结构:
sass
| styles.sass
| _media.sass
| base
| _variables.sass
| _mixins.sass
| menu
| _menu.sass
| _menu_mobile_portrait.sass
| modal
| _modal.sass
| _modal_mobile_portrait.sass
Run Code Online (Sandbox Code Playgroud)
这是我的主要Sass文件:
styles.sass
@import "base/variables"
@import "base/mixins"
@import "menu"
@import "modal"
...
@import "media"
Run Code Online (Sandbox Code Playgroud)
这里的最后一行是针对_media.sass,我希望看起来像这样:
// #Mobile (Portrait)
// ==================================================
// Note: Design for a width of 320px
@media only screen and (max-width: 767px)
@import "menu/menu_mobile_portrait"
@import "modal/modal_mobile_portrait"
Run Code Online (Sandbox Code Playgroud)
使用最新的CodeKit,文件编译没有任何错误; 但是,媒体文件中嵌套的导入模块不会显示在已编译的CSS中.