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

查看:35
本文介绍了Rails 中正确的 SCSS 资产结构的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

在每个目录中,有多个sass partials(通常是*.css.scss,但也有一个或两个*.css.scss.erb).

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

我可能假设了很多,但是由于 application.css 中的 *= require_tree .,rails 应该自动编译这些目录中的所有文件,对吗?

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?

我最近尝试通过删除所有颜色变量并将它们放在根 app/assets/stylesheets 文件夹 (_colors.css.scss) 中的文件中来重组这些文件.然后我在根 app/assets/stylesheets 文件夹中创建了一个名为 master.css.scss 的文件,如下所示:

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

我不太明白 rails 是如何处理资产编译的顺序的,但这显然对我不利.似乎没有文件意识到它们导入了任何变量或 mixin,因此它会引发错误并且我无法编译.

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)

变量$dialog_divider_color 在_colors.css.scss 中有明确定义,_master.css.scss 是导入颜色和我所有的mixin.但显然 rails 没有得到那个备忘录.

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.

有什么方法可以修复这些错误,还是我需要将所有变量定义放回每个单独的文件中,以及所有的 mixin 导入?

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.

推荐答案

CSS 的问题是,您不想自动添加所有文件.浏览器加载和处理工作表的顺序至关重要.因此,您最终总是会明确导入所有 css.

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.

举个例子,假设你有一个 normalize.css 表,以获得默认值看看而不是所有可怕的不同浏览器实现.这应该是浏览器加载的第一个文件.如果您只是在 css 导入中的某处随机包含此表,那么它不仅会覆盖浏览器默认样式,还会覆盖在它之前加载的所有 css 文件中定义的任何样式.这对于变量和 mixin 也是一样的.

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.

在 Euruko2012 上看到 Roy Tomeij 的演示后,我决定采用以下方法,如果你有很多 CSS管理.

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

我通常使用这种方法:

  1. 将所有现有的 .css 文件重命名为 .scss
  2. 从 application.scss 中删除所有内容

开始向 application.scss 添加@import 指令.

Start adding @import directives to application.scss.

如果你使用 twitters bootstrap 和一些你自己的 css sheet,你必须先导入 bootstrap,因为它有一个 sheet 来重置样式.因此,您将 @import "bootstrap/bootstrap.scss"; 添加到您的 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.

bootstrap.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";

你的 application.scss 文件看起来像:

And your application.scss file look like:

@import "bootstrap/bootstrap.scss";

由于导入的顺序,您现在可以使用变量,在之后导入的任何其他 .scss 文件中加载了 @import "variables.scss";它.所以它们可以在 bootstrap 文件夹中的 type.scss 中使用,也可以在 my_model.css.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.

在此之后创建一个名为 partialsmodules 的文件夹.这将是大多数其他文件的位置.您可以将导入添加到 application.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/*";

现在,如果您制作一些 css 来为主页上的文章设置样式.只需创建partials/_article.scss,它就会被添加到编译后的application.css 中.由于导入顺序,您还可以在您自己的 scss 文件中使用任何引导混合和变量.

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.

到目前为止,我发现这种方法的唯一缺点是,有时您必须强制重新编译 partial/*.scss 文件,因为 rails 不会总是为您执行此操作.

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆