css – 页面特定的Sass文件和复制

我真的很难在Rails 3.1项目中构建Sass文件,以避免大量复制……

我有以下结构,application.css.scss作为主要布局的一部分导入：

application.css.scss
  - [*= require] main.css.scss
      - [@import] 'variables';
      - [@import]'bootstrap_overrides';
      - [@import]'bootstrap';
      - [@import]'base_elements';
      - [@import]'superstructure';
      - [@import]'modules';

到现在为止还挺好.所有这些文件都由链轮组合成一个文档.然而,我想进一步模块化我的Sass,特定于页面的文件或文件在我的网站的各个区域共享.

所以在我的GalleryResource#show页面上我需要使用额外的Sass文件：

resource.scss
gallery_resource.scss
badges.scss

也许是来自lib的css文件：

gallery_lib.scss

这些文件需要引用已在application.css中导入的许多文件.他们需要使用variables.css.scss中定义的变量和bootstrap中定义的mixins.所以我被迫在每个使用它们的文件中重新导入这些文件,导致大量重复.我可以为每个页面编写一个清单文件,但这是一个维护噩梦,仍然会导致重复和两个css文件; application.css和page_specific.css.

那么解决方案是什么？我是否需要使用application.css并将其导入移动到每个特定于页面的文件中？因此,使用上面的示例,我最终会得到一个如下所示的清单文件：

gallery_resource_manifest.css.scss
      - [*= require] gallery_lib.css
      - [*= require] gallery_resource.css.scss
         - [@import] 'variables';
         - [@import]'bootstrap_overrides';
         - [@import]'bootstrap';
         - [@import]'base_elements';
         - [@import]'superstructure';
         - [@import]'modules';
         - [@import]'resource';
         - [@import]'gallery_resource';
         - [@import]'gallery';
         - [@import]'badges';

我通过从rspec获取一个提示并创建一个_sass_helper.sass部分来解决这个问题,该部分包含我所有的非直接式导入(变量,mixins,占位符),然后将其包含在每个文件的顶部.非代码位很重要,因为如果_sass_helper.sass包含任何样式,它们将被写入每个文件.

这有效地允许我为每个文件获得相同的“Sass环境”,而不需要任何代码重复.

我的树有这样组织：

includes/
  _variables.sass
  _mixins.sass
  _extends.sass
posts/
  _post_partial_1.sass
  _post_partial_2.sass
application.sass
posts.sass
_sass_helper.sass

然后,像posts.sass这样的东西看起来像：

@import 'sass_helper'
@import 'posts/post_partial_1'
@import 'posts/post_partial_2'

.some.globally.shared.post
  styles: here

它很棒. post partials不需要sass helper,所以我最终得到每个控制器一个主文件,各个功能的部分,以及各处相同的环境.