Rails中正确的SCSS资产结构 [英] Proper SCSS Asset Structure in Rails

问题描述

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

  | -dialogs 
 | -mixins 
 | ---按钮
 | --- gradients 
 | --- vendor_support 
 | --- widgets 
 | -pages 
 | -structure 
 | -ui_elements 
  

在每个目录中，有多个sass分支（通常为* .css.scss，但一个或两个* .css.scss.erb）。

我可能会假设很多，但rails应该自动编译这些目录中的所有文件，因为 * = require_tree。在application.css，对吗？

我最近尝试重构这些文件，删除所有的颜色变量，并将它们放置在根文件夹中 app / assets / stylesheets 文件夹_colors.css.scss）。然后我在根<< c $ c> app / assets / stylesheets 文件夹中创建了一个名为master.css.scss的文件，其格式如下：

  //颜色调色板
 @importcolors; 
 
 //混合
 @importmixins / buttons / standard_button; 
 @importmixins / gradients / table_header_fade; 
 @importmixins / vendor_support / rounded_corners; 
 @importmixins / vendor_support / rounded_corners_top; 
 @importmixins / vendor_support / box_shadow; 
 @importmixins / vendor_support / opacity; 
  

我真的不明白rails如何处理资产编译的顺序，但它显然不在我的赞成。它似乎没有文件意识到他们有任何变量或mixins被导入，所以它抛出错误，我无法编译。

 未定义的变量：$ dialog_divider_color。 
（在/home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb）
 
未定义的mixin'rounded_corners'。 
（在/home/blah/app/assets/stylesheets/widgets.css.scss）
  

$ dialog_divider_color 在_colors.css.scss中明确定义， _master.css.scss 是import颜色和我所有的混音。但是显然rails没有得到那个备忘录。

有一些方法可以解决这些错误，或者我需要把所有的变量定义放回每个个别文件以及所有mixin导入？

不幸的是，这家伙似乎不认为这是可能的，但我希望他的错。任何想法都非常感激。

解决方案

CSS的问题是，你不想自动添加所有文件。
浏览器加载和处理工作表的顺序至关重要。所以你总是最终明确导入所有的CSS。

例如，假设您有 normalize.css sheet，得到默认的外观，而不是所有可怕的不同的浏览器实现。这应该是浏览器加载的第一个文件。如果你只是随机地将这个表包含在你的css导入的某个地方，它将不仅覆盖浏览器默认样式，而且还覆盖所有css文件中定义的任何样式。

在 Roy Tomeij 看到演示文稿后，在Euruko2012我决定了以下方法，如果你有很多CSS要管理。

我通常使用这种方法：

1. 将所有现有的.css文件重命名为.scss


2. 从application.scss中删除所有内容

开始将@import指令添加到 application.scss 。

如果你使用twitters bootstrap和你自己的几个css工作表，你必须首先导入bootstrap，因为它有一个表格来重置样式。
因此，您可以向 application.scss 中添加 @importbootstrap / bootstrap.scss; 。

bootstrap.scss文件如下所示：

  // CSS重置
 @importreset.scss; 
 
 // Core 
 @importvariables.scss; 
 @importmixins.scss; 
 
 //网格系统和页面结构
 @importscaffolding.scss; 
 
 //样式模式和元素
 @importtype.scss; 
 @importforms.scss; 
 @importtables.scss; 
 @importpatterns.scss; 
  

您的 application.scss 档案：

  @importbootstrap / bootstrap.scss; 
 

由于导入的顺序，现在可以使用加载<$ c $的变量在其后导入的任何其他 .scss 文件中的 @importvariables.scss; 因此，它们可以在引导文件夹中的 type.scss 中使用，但也可以在 my_model.css.scss p>

之后，创建一个名为 partials 或 modules 的文件夹。这将是大多数其他文件的地方。您只需将导入添加到 application.scss 文件，它将如下所示：

  @importbootstrap / bootstrap.scss; 
 @importpartials / *; 
  

现在如果你在你的首页上做一些文章。只需创建 partials / _article.scss ，它将被添加到编译的 application.css 。因为导入顺序，你也可以在自己的scss文件中使用任何引导程序混合和变量。

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

So, I have an app/assets/stylesheets/ directory structure that looks something like this:

   |-dialogs
   |-mixins
   |---buttons
   |---gradients
   |---vendor_support
   |---widgets
   |-pages
   |-structure
   |-ui_elements

In each directory, there are multiple sass partials (usually *.css.scss, but one or two *.css.scss.erb).

I might be assuming a lot, but rails SHOULD automatically compile all the files in those directories because of *= require_tree . in application.css, right?

I recently have tried restructuring these files by removing all color variables and placing them in a file in the root app/assets/stylesheets folder (_colors.css.scss). I then created a file in the root app/assets/stylesheets folder called master.css.scss which looks like this:

// 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";

I don't really understand how rails handles the order of asset compilation, but it's obviously not in my favor. It appears none of the files realize they have any variables or mixins being imported, and so it throws errors and I can't compile.

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)

The variable $dialog_divider_color is clearly defined in _colors.css.scss, and _master.css.scss is importing colors and all my mixins. But apparently rails didn't get that memo.

Is there some way I can fix these errors, or will I need to resort to putting all my variable definitions back into each individual file, as well as all the mixin imports?

Unfortunately, this guy doesn't seem to think it's possible, but I'm hoping he's wrong. Any thoughts are greatly appreciated.

解决方案

The problem with CSS is, you do not want to automatically add all files. The order of which your sheets are loaded and processed by the browser is essential. So you will always end up explicitly importing all your css.

As an example, lets say you have a normalize.css sheet, to get a default look instead of all the horrible different browser implementations. This should be the first file the browser loads. If you just randomly include this sheet somewhere in your css imports, it will then not only override the browser default styles, but also any styles defined in all css files that were loaded before it. This goes the same for variables and mixins.

After seeing a presentation by Roy Tomeij at Euruko2012 I decided for the following approach if you have a lot of CSS to manage.

I generally use this approach:

1. Rename all existing .css files to .scss
2. Remove all contents from application.scss

Start adding @import directives to application.scss.

If you are using twitters bootstrap and a few css sheets of your own, you have to import bootstrap first, because it has a sheet to reset styles. So you add @import "bootstrap/bootstrap.scss"; to your application.scss.

The bootstrap.scss file looks like:

// 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";

And your application.scss file look like:

@import "bootstrap/bootstrap.scss";

Because of the order of the imports, you can now use the variables, loaded with @import "variables.scss"; in any other .scss file imported after it. So they can be used in type.scss in the bootstrap folder but also in my_model.css.scss.

After this create a folder named partials or modules. This will be the place of most of the other files. You can just add the import to the application.scss file so it will look like:

@import "bootstrap/bootstrap.scss";
@import "partials/*";

Now if you make a bit of css to style an article on your homepage. Just create partials/_article.scss and it will be added to the compiled application.css. Because of the import order you can also use any bootstrap mixins and variables in your own scss files.

The only drawback of this method I found so far is, sometimes you have to force a recompile of the partial/*.scss files because rails wont always do it for you.

这篇关于Rails中正确的SCSS资产结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！