Rails中正确的SCSS资产结构

小编典典

Rails中正确的SCSS资产结构

css

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

   |-dialogs
   |-mixins
   |---buttons
   |---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）中的文件中来重组这些文件。然后，我在根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如何处理资产编译的顺序，但是显然这对我不利。似乎没有文件意识到要导入任何变量或mixins，因此会引发错误，我无法编译。

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导入放回每个文件中？

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

阅读 405

2020-05-16

共1个答案

小编典典

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

例如，假设您有一个normalize.css工作表，以获取默认外观，而不是所有可怕的不同浏览器实现。这应该是浏览器加载的第一个文件。如果只是将此表随机包含在CSS导入中的某个位置，则它将不仅覆盖浏览器的默认样式，而且覆盖所有在其之前加载的CSS文件中定义的样式。变量和混入也是如此。

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

我通常使用这种方法：

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

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

如果您使用的是twittersbootstrap和自己的一些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文件一起加载。因此，它们可以type.scss在bootstrap文件夹中使用，也可以在中使用my_model.css.scss。

之后，创建一个名为partials或的文件夹modules。这将是其他大多数文件的位置。您可以将导入添加到application.scss文件中，使其看起来像：

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

现在，如果您花一点点css在首页上设置文章样式。只需创建partials/_article.scss，它将添加到已编译application.css。由于导入顺序的原因，您还可以在自己的scss文件中使用任何引导混合和变量。

到目前为止，我发现此方法的唯一缺点是，有时您必须强制重新编译partial / *。scss文件，因为Rails不会总是为您完成此操作。

2020-05-16