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中，对吗？
我最近尝试通过删除所有颜色变量并将它们放在根app/assets/stylesheets文件夹（_colors.css.scss）中的文件中来重构这些文件。 然后，我在根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如何处理资产编制的顺序，但显然对我不利。 看起来没有一个文件意识到他们有任何变量或混入正在导入，所以它会抛出错误，我不能编译。
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导入中？
不幸的是，这个人似乎并不认为这是可能的，但我希望他错了。 任何想法都不胜感激。
CSS的问题是，你不想自动添加所有文件。 您的工作表由浏览器加载和处理的顺序非常重要。 所以你总是会明确地导入你所有的CSS。
作为一个例子，假设你有一个normalize.css表单，以获得默认外观，而不是所有可怕的不同浏览器实现。 这应该是浏览器加载的第一个文件。 如果你只是随机地在css导入的某个地方包含这个表单，那么它不仅会覆盖浏览器的默认样式，还会覆盖所有在它之前加载的css文件中定义的样式。 这对变量和mixin是一样的。
在Euruko2012上看到Roy Tomeij的演讲后，我决定采用以下方法，如果你有很多CSS需要管理的话。
我通常使用这种方法：
开始添加@import指令到application.scss 。
如果您正在使用twitters引导程序和您自己的一些css表单，则必须先导入引导程序，因为它有一个表单来重置样式。 所以你添加@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文件中使用任何引导混合和变量。
目前我发现的这种方法唯一的缺点是，有时你必须强制重新编译partial / *。scss文件，因为rails总是不会为你做。
创建以下文件夹结构：
+ assets
|
--+ base
| |
| --+ mixins (with subfolders as noted in your question)
|
--+ styles
|
--+ ...
在文件夹base创建一个文件“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
作为最后一步（这很重要），在要使用变量或mixin的每个样式文件中声明@ @import 'base/globals' 。 您可能会考虑这种开销，但我确实喜欢这样的想法，即您必须在每个文件中声明样式的依赖关系。 当然，仅在globals.css.scss中导入mixins和变量非常重要，因为它们不会添加样式定义。 否则，风格定义将在您的预编译文件中被多次包含......
要跨文件使用变量等，您需要使用@import指令。 文件按照指定的顺序导入。
然后，使用application.css来要求声明导入的文件。 这是实现你想要的控制的方法。
最后，在layout.erb文件中，您可以指定要使用哪个“主”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_admin", media: "all"
上一篇: Proper SCSS Asset Structure in Rails
下一篇: Why there is no assets/images directory in Rails 4.0 RC1