Rails中正确的SCSS资产结构
所以，我有一个app/assets/stylesheets/目录结构，看起来像这样：
|-dialogs |-mixins |---buttons |---gradients |---vendor_support |---widgets |-pages |-structure |-ui_elements
在每个目录中，有多个sass部分（通常是* .css.scss，但是有一个或两个* .css.scss.erb）。
我可能会假设很多，但由于*= require_tree . ，rails应该自动编译这些目录中的所有文件*= require_tree . 在application.css中，对吗？
我最近尝试通过删除所有颜色variables并将它们放在根app/assets/stylesheets文件夹（_colors.css.scss）中的一个文件中来重构这些文件。 然后我在名为master.css.scss的根app/assets/stylesheets文件夹中创build了一个文件，如下所示：
// 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如何处理资产编译的顺序，但是显然对我不利。 看来没有任何文件意识到他们有任何variables或混入被导入，所以它会抛出错误，我不能编译。
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)
variables$dialog_divider_color在_colors.css.scss中明确定义， _master.css.scss是导入颜色和我所有的混合。 但显然，铁轨没有得到这个备忘录。
有什么方法可以解决这些错误，或者我需要将所有的variables定义放回到每个单独的文件，以及所有的mixin导入？
不幸的是， 这家伙似乎并不认为这是可能的，但我希望他是错的。 任何想法，不胜感激。
CSS的问题是，你不想自动添加所有的文件。 浏览器加载和处理表单的顺序非常重要。 所以你会最终明确导入所有的CSS。
作为一个例子，假设你有一个normalize.css表单，以获得一个默认的外观，而不是所有可怕的不同的浏览器实现。 这应该是浏览器加载的第一个文件。 如果你只是随机地在css导入的某个地方包含这个表单，那么它不仅会覆盖浏览器的默认样式，还会覆盖所有在其之前加载的css文件中定义的样式。 这对variables和mixin也是一样的。
在Euruko2012上看到Roy Tomeij的介绍之后，我决定采用以下方法，如果你有很多CSS需要pipe理的话。
我通常使用这种方法：
- 将所有现有的.css文件重命名为.scss
- 从application.scss中删除所有内容
开始添加@import指令到application.scss 。
如果你正在使用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";
由于导入的顺序，现在可以使用variables，使用@import "variables.scss";加载@import "variables.scss"; 在它之后导入的任何其他.scss文件中。 所以它们可以在bootstrap文件夹中的type.scss中使用，也可以在my_model.css.scss 。
之后创build一个名为partials或modules的文件夹。 这将是大多数其他文件的地方。 您可以将导入添加到application.scss文件，使其看起来像这样：
@import "bootstrap/bootstrap.scss"; @import "partials/*";
现在，如果你做了一些CSS来devise你的主页上的文章。 只需创buildpartials/_article.scss并将其添加到编译的application.css 。 由于导入顺序，您还可以在自己的scss文件中使用任何引导混合和variables。
目前我发现的这个方法唯一的缺点是，有时你必须强制重新编译partial / *。scss文件，因为rails不会总是为你做。
创build以下文件夹结构：
+ assets | --+ base | | | --+ mixins (with subfolders as noted in your question) | --+ styles | --+ ...
在文件夹中创build一个文件“globals.css.scss”。 在这个文件中，声明所有的导入：
@import 'base/colors'; @import 'base/mixins/...'; @import 'base/mixins/...';
在你的application.css.scss中，你应该有：
*= require_self *= depends_on ./base/globals.css.scss *= require_tree ./styles
作为最后一步（这很重要），在每个要使用variables或mixin的样式文件中声明@ @import 'base/globals' 。 你可能会考虑这个开销，但我真的很喜欢这个想法，你必须在每个文件中声明你的样式的依赖关系。 当然，在globals.css.scss中只导入mixins和variables非常重要，因为它们不会添加样式定义。 否则，样式定义将在您的预编译文件中被多次包含。
要跨文件使用variables等，您需要使用@import指令。 文件按照指定的顺序导入。
然后，使用application.css来要求声明导入的文件。 这是实现你想要的控制的方法。
最后，在你的layout.erb文件中，你可以指定使用哪个“master”css文件
例子会更有帮助：
假设你的应用中有两个模块需要不同的CSS集：“application”和“admin”
文件
|-app/ |-- assets/ |--- stylesheets/ | // the "master" files that will be called by the layout |---- application.css |---- application_admin.css | | // the files that contain styles |---- config.scss |---- styles.scss |---- admin_styles.scss | | // the files that define the imports |---- app_imports.scss |---- admin_imports.scss | | |-- views/ |--- layouts/ |---- admin.html.haml |---- application.html.haml
以下是这些文件的内容：
-------- THE STYLES -- config.scss // declare variables and mixins $font-size: 20px; -- app_imports.scss // using imports lets you use variables from `config` in `styles` @import 'config' @import 'styles' -- admin_imports.scss // for admin module, we import an additional stylesheet @import 'config' @import 'styles' @import 'admin_styles' -- application.css // in the master application file, we require the imports *= require app_imports *= require some_other_stylesheet_like_a_plugin *= require_self -- application_admin.css // in the master admin file, we require the admin imports *= require admin_imports *= require some_other_stylesheet_like_a_plugin *= require_self -------- THE LAYOUTS -- application.html.haml // in the application layout, we call the master css file = stylesheet_link_tag "application", media: "all" -- admin.html.haml // in the admin layout, we call the admin master css file = stylesheet_link_tag "application", media: "all"
根据这个问题 ，你只能使用application.css.sass来定义你的模板之间的导入和共享variables。
=>这似乎只是一个名称的问题。
另一种方式可以包括一切，并禁用此pipe道 。
我有一个非常类似的问题。 帮助我的是在导入部分时将下划线放入@import语句中。 所以
@import "_base";
代替
@import "base";
这可能是一个奇怪的错误…
