当前位置: 首页 > 面试题库 >

Rails中正确的SCSS资产结构

商宏爽
2023-03-14
问题内容

所以,我有一个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导入放回每个文件中?

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


问题答案:

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

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

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

我通常使用这种方法:

  1. 将所有现有的.css文件重命名为.scss
  2. 从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不会总是为您完成此操作。



 类似资料:
  • 在Rails中,我查询数据库以构建highcharts的数据对象。 这是我的控制器中的方法: 终止 现在,在我看来,我正试图在一个脚本中把它拉出来。 ---脚本--- ---脚本--- 当我打印到控制台时,我可以看到对象及其所有数据。此外,当我打印到html时,输出看起来是正确的: "[{\"名称\":\"原 但是当我去打印数据变量时,它是null(显然是由于不是有效输入)。我搞砸了什么?

  • 我对正确的mvc模式有点困惑。 这是我的配置文件:在这个类中,我有所有的Beans。 这是我的接口UserRepo和接口UserService。它们是一样的 我的类实现了这个接口 最后,我在控制器I@Autowired UsersRepo/中安装了控制器,这是一个接口/。我的代码可以运行,我可以做所有的CRUD操作。 但是,有人告诉我,这不是正确的方式。我不能直接自动连线@在控制器类内部自动连接U

  • 问题内容: 我最近一直在尝试使我制作的程序自动化,但是遇到了一个问题,robot.mouseMove(100,100)不会将鼠标发送到100,100。 我做了一个简单的程序来展示这一点: 每次我运行此代码都会产生不同的结果: 当您将其循环放置时,鼠标会接近正确的位置。代码: 结果: 我不知道发生了什么,但任何帮助将不胜感激。谢谢。为了澄清我正在运行Windows 10和Java版本1.8.0_16

  • 巴克特1 > 文件夹1 > 文件1 文件2 文件夹3 > 文件3 文件夹4 文件6 文件夹2 > 文件4 文件5 文件7 文件8 我只想获取folder1、folder2、file7和file8。我怎么才能得到呢?基本上,我不希望所有递归文件夹/文件都位于文件夹或存储桶中。标记、分隔符和前缀的工作不太清楚。 我正在尝试:

  • 问题内容: 我想转换成 我用了 但是我明白了 问题答案: 每月使用CAPITAL M, 另外,您首先要设置日期,然后再重置日历,我想这不是您想要的,可能是因为您需要将其更改为以下内容 看到 API文件

  • 我们在Hadoop 2.7.2和Centos 7.2上运行Apache Spark 2.0的集群。我们使用Spark DataFrame/DataSet API编写了一些新代码,但在写入并将数据读取到Windows Azure存储Blob(默认HDFS位置)后,注意到连接上的结果不正确。我已经能够使用在群集上运行的以下代码片段复制该问题。 输出 这是正确的。然而,在写入和读取数据之后,我们看到了这