所以,我有一个 app/assets/stylesheets/
目录结构,看起来像这样:
|-dialogs
|-mixins
|---buttons
|---gradients
|---vendor_support
|---widgets
|-pages
|-structure
|-ui_elements
在每个目录中,有多个sass partials(通常是*.css.scss,但也有一个或两个*.css.scss.erb)。
我可能假设了很多,但是由于 application.css 中的 *= require_tree .
,rails 应该自动编译这些目录中的所有文件,对吗?
我最近尝试通过删除所有颜色变量并将它们放在根 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是怎么处理 Assets 编译的顺序的,但显然这对我不利。似乎没有文件意识到它们有任何变量或正在导入的混合,因此它会抛出错误,我无法编译。
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
正在导入颜色和我所有的混合。但显然 rails 没有得到那个备忘录。
有什么方法可以修复这些错误,还是我需要求助于将我所有的变量定义放回每个单独的文件,以及所有的 mixin 导入?
不幸的是,this guy似乎不认为这是可能的,但我希望他是错的。非常感谢任何想法。
最佳答案
CSS 的问题是,您不想自动添加所有文件。 浏览器加载和处理工作表的顺序至关重要。所以你最终总是会明确地导入你所有的 css。
例如,假设您有一个 normalize.css表,以获得默认外观,而不是所有可怕的不同浏览器实现。这应该是浏览器加载的第一个文件。如果您只是随机将此工作表包含在您的 css 导入中的某个位置,那么它不仅会覆盖浏览器的默认样式,还会覆盖在它之前加载的所有 css 文件中定义的任何样式。对于变量和混入也是如此。
看了 Roy Tomeij 的介绍后在 Euruko2012,如果你有很多 CSS 需要管理,我决定采用以下方法。
我通常使用这种方法:
- 将所有现有的 .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";
由于导入的顺序,您现在可以在之后导入的任何其他 .scss
文件中使用通过 @import "variables.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 文件中使用任何 Bootstrap 混合和变量。
到目前为止,我发现这种方法的唯一缺点是,有时您必须强制重新编译 partial/*.scss 文件,因为 rails 不会总是为您做这件事。
关于css - Rails 中适当的 SCSS Assets 结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9138946/