Rails中正确的SCSS资产结构

所以，我有一个app / assets / stylesheets /目录结构，看起来像这样：

|-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的问题是，你不想自动添加所有文件。
浏览器加载和处理工作表的顺序至关重要。所以你总是最终明确导入所有的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文件中使用任何引导程序混合和变量。

这个方法的唯一缺点，我发现到目前为止，有时你必须强制重新编译部分/ * .scss文件，因为rails不会总是为你做。

Rails中正确的SCSS资产结构

相关推荐