|-dialogs |-mixins |---buttons |---gradients |---vendor_support |---widgets |-pages |-structure |-ui_elements
在每个目录中，有多个sass分支(通常为* .css.scss，但一个或两个* .css.scss.erb)。
我可能会假设很多，但rails应该自动编译这些目录中的所有文件，因为* = require_tree。在application.css，对吧？
我最近尝试重构这些文件，通过删除所有的颜色变量，并将它们放在根应用程序/ assets / stylesheets文件夹(_colors.css.scss)中的文件。然后我在root app / assets / stylesheets文件夹中创建了一个名为master.css.scss的文件，其格式如下：
// Color Palette @import "colors"; // Mixins @import "mixins/buttons/standard_button"; @import "mixins/gradients/table_header_fade"; @import "mixins/vendor_support/rounded_corners"; @import "mixins/vendor_support/rounded_corners_top"; @import "mixins/vendor_support/Box_shadow"; @import "mixins/vendor_support/opacity";
我真的不明白rails如何处理资产编译的顺序，但它显然不是我的青睐。它似乎没有一个文件意识到他们有任何变量或mixins被导入，所以它抛出错误，我无法编译。
Undefined variable: "$dialog_divider_color". (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb) Undefined mixin 'rounded_corners'. (in /home/blah/app/assets/stylesheets/widgets.css.scss)
变量$ dialog_divider_color在_colors.css.scss中清楚地定义，而_master.css.scss是导入颜色和所有我的混合。但显然铁路没有得到那个备忘录。
有一些方法，我可以解决这些错误，或者我需要求助于把所有的变量定义回到每个单独的文件，以及所有的mixin导入？
不幸的是，this guy似乎不认为这是可能的，但我希望他的错。任何想法都非常感谢。
浏览器加载和处理工作表的顺序至关重要。所以你总是最终明确导入所有的CSS。
例如，假设您有一张normalize.css的工作表，以获得默认外观，而不是所有可怕的不同浏览器实现。这应该是浏览器加载的第一个文件。如果你只是随机地将这个表包含在css导入的某个地方，那么它不仅会覆盖浏览器默认样式，而且还会覆盖在之前加载的所有css文件中定义的任何样式。这对于变量和混合是相同的。
看到Roy Tomeij在Euruko2012的演示后，我决定采取以下方法，如果你有很多CSS要管理。
我一般使用这种方法：
>将所有现有的.css文件重命名为.scss
>从application.scss中删除所有内容
开始向application.scss中添加@import指令。
如果你使用twitters bootstrap和你自己的几个css工作表，你必须首先导入bootstrap，因为它有一个表来重置样式。
所以你添加@import“bootstrap / bootstrap.scss”;到你的application.scss。
bootstrap.scss文件看起来像：
// CSS Reset @import "reset.scss"; // Core @import "variables.scss"; @import "mixins.scss"; // Grid system and page structure @import "scaffolding.scss"; // Styled patterns and elements @import "type.scss"; @import "forms.scss"; @import "tables.scss"; @import "patterns.scss";
和你的application.scss文件看起来像：
@import "bootstrap/bootstrap.scss";
因为导入的顺序，现在可以使用变量，用@import“variables.scss”加载;在其后导入的任何其他.scss文件中。所以它们可以在bootstrap文件夹中的type.scss中使用，但也可以在my_model.css.scss中使用。
之后，创建一个名为partials或modules的文件夹。这将是大多数其他文件的地方。您只需将导入添加到application.scss文件，它将看起来像：
@import "bootstrap/bootstrap.scss"; @import "partials/*";
现在，如果你做一点点CSS风格的首页上的文章。只需创建partials / _article.scss，它将被添加到编译的application.css。由于导入顺序，您还可以在自己的scss文件中使用任何引导程序混合和变量。
