Rails 中正确的 SCSS 资产结构

Question

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

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

在每个目录中，有多个 sass 部分（通常是 *.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 如何处理资产编译的顺序，但显然它是不利于我。似乎没有一个文件意识到它们有任何变量或混入被导入，所以它会抛出错误，我无法编译。

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 没有收到这份备忘录。

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

不幸的是，这个人似乎认为这是不可能的，但是我希望他是错的。任何想法都将不胜感激。

Answer 1

CSS 的问题是，您不希望自动添加所有文件。
浏览器加载和处理工作表的顺序至关重要。所以你最终总是会显式导入所有的 css。

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

在 Euruko2012 上看到 Roy Tomeij 的演示后，如果您有大量 CSS 需要管理，我决定采用以下方法。

我通常使用这种方法：

1. 将所有现有 .css 文件重命名为 .scss
2. 删除 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";

由于导入的顺序，您现在可以使用通过 @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 并不总是为您执行此操作。

Answer 2

创建以下文件夹结构：

+ 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

作为最后一步（这很重要），在每个中声明 @import 'base/globals'要在其中使用变量或 mixin 的样式文件。您可能会考虑这种开销，但我实际上喜欢这样的想法：您必须在每个文件中声明样式的依赖关系。当然，重要的是您只在 globals.css.scss 中导入 mixins 和变量，因为它们不添加样式定义。否则，样式定义将多次包含在您的预编译文件中......

Answer 3

要跨文件使用变量等，您需要使用 @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"

Answer 4

根据这个问题，你可以仅< /strong> 使用 application.css.sass 来定义模板之间的导入和共享变量。

=>看来这只是一个名字的问题。

另一种方法可以是 包含所有内容并禁用此管道。

Answer 5

我有一个非常相似的问题。对我有帮助的是在导入部分时在 @import 语句中添加下划线。所以

@import "_base";

这

@import "base";

可能是一个奇怪的错误......

Answer 6

我的解决方案是拥有一个包含所有导入的 application.css.scss：

@import "./inputs";
@import "./buttons";
@import "./rails";
@import "./base";
@import "./checked-border";
@import "./tailwind-extended";
@import "./helpers";
@import "./custom";
@import "./overrides";

然后将： 添加

@import "./constants";

到使用常量的文件中