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

可能还有一个库中的css文件：

gallery_lib.scss

这些文件需要引用application.css中已经导入的许多文件。他们需要使用variables.css.scs中定义的变量和引导中定义的mixin。因此，我被迫在每个使用这些文件的文件中重新导入这些文件，从而导致大量重复。我可以为每个页面编写一个清单文件，但这是一个维护噩梦，仍然会导致重复和两个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';

---

在组织风格时，我也尝试做了与您提到的相同的事情。Rails通过不断为您生成基于控制器的样式表，几乎将您推向了这个方向。最后，我选择将所有内容添加到

application.sass

。这种方法的主要优点是，在页面加载时只发出一个请求，而不必重新导入用户在最后一页请求的代码

我个人的观点是，如果你能很好地抽象你的CSS，你只需要使用一个样式表，因为你没有太多的视图特定的代码来引入样式表。不管是哪种方式，备选方案（根据页面需求随机加载模块，而您可能在上一页上也做了相同的操作）听起来并不能解决这个问题。此外，您对全新文件的请求也越来越多

CSS可能有点难以组织。下面是一个我通常如何组织样式以及样式表目录的示例。此方法适用于单个名称空间（应用程序），如果需要，也可以将其分解为适用于多个名称空间（即管理、应用程序）

application.sass

//供应商----------------------------------------------------------------------
//罗盘
@导入“指南针/重置”
@导入“指南针/css3/盒影”
@导入“指南针/css3/边界半径”
@导入“指南针/css3/盒子大小”
@导入“指南针/css3/不透明度”
@导入“指南针/布局/粘性页脚”
@导入“指南针/实用程序”
//网格
@导入“susy”
//应用-----------------------------------------------------------------
//基地
//用于mixin、变量和助手，以帮助构建
//应用程序。不应使用实际元素的样式
//进垒。
@导入“基本/颜色”
@导入“基本/字体”
@导入“基本/混合”
@导入“基本/网格”
//布局
//通用站点样式。这包括站点浏览器样式
//例如页眉、页脚、flash消息、导航等
//作为站点周围使用的常见模式，例如表单、类型、，
//链接等。松散的想法是，你可以采取这些
//样式和创建类似的“布局”，但它不会
//包括书籍、原稿等上下文模式。
@导入“布局/按钮”
@导入“布局/内容”
@导入“布局/标题”
@导入“布局/闪存”
@导入“布局/表格”
@导入“布局/页脚”
@导入“布局/链接”
@导入“布局/工具提示”
@导入“布局/排版”
//模块
//在松散绑定的多个页面上使用的元素
//到我们的域和数据结构。例子是相关的
//根据您网站的需要。作为一般准则，所有
//模块应在多个页面上使用。使用的元素
//在单个页面上，视图中应包含。
@导入“模块/文章”
@导入“模块/按钮”
@导入“模块/表格”
@导入“模块/链接”
@导入“模块/分页”
@导入“模块/用户”
@导入“模块/统计”
@将“模块/某些\其他\域\特定\样式\唯一\导入您的\站点”
//观点
//单个页面上使用的元素。这些样式是
//通常需要帮助完成一项任务
//页面中的模块没有完全对齐，
//或者页面具有完全唯一的元素。
//这些样式通常可以抽象为模块
//但缺乏这样做的理由。把他们留在这里会有帮助
//解释它们的单数用法。
@导入“视图/欢迎/索引”
@导入“视图/设置/全部”
@导入“视图/文章/显示”
@导入“视图/用户/显示”

以这种方式组织样式有助于为每个文件创建一个单独的职责（看起来您也在尝试这样做）。我发现这使得CSS更易于维护。此外，如果您需要添加媒体查询或针对具有给定模块的特定浏览器，它将为您提供这样做的位置，该位置与上下文相关，同时仍保持代码的易读性和独立性

注意，如果您只有一个名称空间，则将使用上面的示例。如果您有一个管理部分（或其他内容），您可以将所有这些目录/文件粘贴到“应用程序”目录中，并为“管理”创建一个类似的结构。这将在

app/stylesheets

中留下以下结构

- admin
- application
- admin.sass
- application.sass

您甚至可以创建一个结构来在两者之间共享项目，但这可能是必需的，也可能不是必需的。关键是，无论你需要做什么，你都有很大的灵活性和组织性。如果您愿意的话，同样的结构也可以用于JS。这避免了重新加载模块和发出新请求的问题

FWIW，我试图找到一种解决方案，只在每页上输入我需要的内容（你的问题），但最终我只通过了更多

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

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

.some.globally.shared.post
  styles: here